Parallax Mouse Vanilla

Pour faire bouger des trucs selon la position de la souris

On peut appliquer translateX, translateY, scale et rotation.

On peut choisir l'élément qui servira de référence au lancement du parallax et à la position de la souris (window, parent ou lui-même).

Un seul événement onmouseover appliqué à la window pour améliorer les perfs et éviter les ralentissements ou accoups.

Ce plugin permet d'appliquer des transform à des éléments qui ont déjà un transform en CSS.
Il récupère le transform initial (grace au getComputedStyle(plugin.el).transform) et applique son propre transform par-dessus. C'est top et je compte bien rajouter cette fonctionnalité importante à mon plugin parallax, à suivre...

Utilisation du plugin

Inclure le plugin à sa page

<script type="text/javascript" src="js/regal-mouse-parallax.js"></script>

Déclarer les objets :

var regalMouseParallaxElts = document.querySelectorAll('.js-regal-mouse-parallax');
for(var i=0; i<regalMouseParallaxElts.length; i++){
      new RegalMouseParallax( regalMouseParallaxElts[i]);
}
function regalMouseMove(){
      regalMouseParallaxElts.forEach(function(elt){
            if(elt.getAttribute('data-transform')){
                  var transf = elt.getAttribute('data-transform');
                  elt.style.transform = transf;
                  elt.style['-webkit-transform'] = transf;
            }
      });
};
//only one mousemove for all, better perf!
window.removeEventListener('mousemove', regalMouseMove);
window.addEventListener('mousemove', regalMouseMove);

Le plugin stocke les valeurs de transform à appliquer dans un attribut data-transform.
Le transform est appliqué dans un seul événement mousemove attaché à la window, on obtient ainsi de bien meilleures perfs !

HTML

On détermine les propriétés à animer avec des attributs "data-XXX".
data-x="NUM"
TranslateX
Si la valeur contient "px", le plugin appliquera cette valeur multipliée par le ratio de la position de la souris + le translateX initial appliqué via CSS. Si elle ne contient pas "px", le plugin applique la valeur de la position X de la souris multipliée par cette valeur (ça a l'air compliqué comme ça et le mieux, c'est de faire des essais !).
data-y="VAL"
TranslateY
Même chose que pour data-x mais avec le Y !
data-scale="VAL"
Le plugin appliquera cette valeur multipliée par le ratio de la position X de la souris + le scale initial appliqué via CSS.
data-rotate="VAL"
Le plugin appliquera cette valeur multipliée par le ratio de la position X de la souris + le rotate initial appliqué via CSS.
data-ref="VAL"
Pour déterminer l'élément qui sert de référent pour la position de la souris :window : la fenêtre (idéal pour les éléments en position fixed);
parent : le conteneur de l'élément.
Si on ne déclare pas de data-ref, c'est l'élément lui-même qui est pris en compte.
data-invert="1"
Pour inverser le sens du translate.

Petit truc : en rajoutant une transition sur le transform, l'objet continue à "bouger" à la fin du mousemove (plus ou moins longtemps selon la durée de la transition - ici : 0.3s).
Comme IE/EDGE bugue sévère avec les transitions, un petit hack CSS est nécessaire pour bloquer les transitions :
/* IE-10&11 hacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .js-regal-mouse-parallax{
            transition: none !important;
      }
}
/* EDGE hack */
@supports (-ms-ime-align:auto) {
      .js-regal-mouse-parallax{
            transition: none !important;
      }
}
L'effet est moins réussi mais, après tout, qui utilise Edge ou IE ?
Moins de 5% des internautes dans le monde, 6.18% en Europe et 6.23% en France... c'est peu (et c'est tant mieux).
gs.statcounter.com

On peut aussi déterminer les propriétés à animer en javascript :
var monParallax = new RegalParallax( document.querySelector('.element'), {'y':'VAL', 'x':'VAL', 'ref':'VAL'});
Les noms des paramètres sont les mêmes qu'en version HTML sans "data-".
Les propriétés déclarées en javascript écrasent les valeurs déclarées en HTML.