Anime des trucs en fonction de la position de la souris.
Inclure le plugin jQuery regaloebMouseParallax-plugin.js.
Déclarer les éléments au domready : $('.js-mouse-parallax').regaloebMouseParallax();
La position des éléments est modifiée avec translate ou translate3d selon les capacités du navigateur.
On peut empêcher les mouvements horizontaux avec un attribut data-nox="true" et les mouvements verticaux avec data-noy="true".
On peut aussi inverser les mouvements avec data-invert="true"
Et appliquer un ratio aux mouvements avec data-depth="X", le mouvement est alors multiplié par X.
On peut aussi décider de déclencher les mouvements uniquement au survol de l'élément avec data-mouse-relative="self".
Mais ce n'est pas tout!
On peut aussi modifier :
L'opacité avec data-o="1#0.75";
La rotation avec data-rotate="0#-90";
L'échelle avec data-scale="1#0.5";
Le skewX avec data-skewX="0#15"";
Le skewY avec data-skewY="0#15"";
La valeur à gauche du # est appliquée lorsque la souris est au centre, la valeur à droite lorsque la souris est aux extrémités gauche et droite et toutes les valeurs intermédiaires entre ces trois positions.
Enfin, pour les smartPhones, ce n'est évidemment pas la souris qui active les mouvements mais l'inclinaison du téléphone.
L'attribut data-mobileSpeed="0.8" détermine la vitesse des mouvements.
Et data-x-end="50" détermine la valeur maximale appliquée au translate.