Parallax Vanilla

Mieux que mieux !

En modifiant uniquement les éléments transform et opacity des objets parallaxés, on gagne en performance par rapports aux parallax qui modifient les margin, padding, top, left, etc. Alors, c'est mieux.
Et comme c'est un constructeur vanilla, pas besoin de jQuery. Alors, c'est encore mieux.

Nouveauté aout 2021 !

Maintenant, on peut appliquer des transform et une opacité aux objets parallaxés via CSS sans que ceux-ci ne soient écrasés par le script !

La méthode ?
Récupérer la valeur du transform initial dans un objet matrice var matrix = getComputedStyle(plugin.el).transform;.
Manipuler cet objet pour retrouver les valeurs de translate, rotate, scale, skew et opacity.
Modifier les paramètres du parallax en fonction de ces valeurs.
Du bon jus de cerveau qui m'a presque grillé quelques neurones !

Télécharger les fichiers

Fichier source JS
Fichier JS minifié

Utilisation du plugin

Inclure le plugin à sa page

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

Déclarer les objets :

var regalParallax = document.querySelectorAll('.js-regaloeb-parallax');
for(var i=0; i<regalParallax.length; i++){
    new RegalParallax( regalParallax[i]);
}

HTML

On détermine les propriétés à animer avec des attributs "data-XXX".
L'attribut data-x="INITIAL#FINAL" indique que le translateX sera modifiée via la propriété translate3d.
L'attribut data-y="INITIAL#FINAL" indique que la translateY sera modifiée via la propriété translate3d.
L'attribut data-scale="INITIAL#FINAL" indique que la scale sera modifiée, INITIAL: scale initiale, FINAL: scale finale.
L'attribut data-scaleX="INITIAL#FINAL" indique que la scaleX sera modifiée, INITIAL: scaleX initiale, FINAL: scaleX finale.
L'attribut data-scaleY="INITIAL#FINAL" indique que la scaleY sera modifiée, INITIAL: scaleY initiale, FINAL: scaleY finale.
L'attribut data-rotate="INITIAL#FINAL" indique que la rotation sera modifiée, INITIAL: rotate initiale, FINAL: rotate finale.
L'attribut data-skewX="INITIAL#FINAL" indique que le skewX sera modifiée, INITIAL: skewX initiale, FINAL: skewX finale.
L'attribut data-skewY="INITIAL#FINAL" indique que le skewY sera modifiée, INITIAL: skewY initiale, FINAL: skewY finale.
L'attribut data-o="INITIAL#FINAL" indique que l'opacité sera modifiée.
L'attribut data-end="NUM" indique à quel endroit du viewport l'objet atteint ses valeurs finales : 2 = au milieu, 3 = au 2/3, 1 au scroll 0. Valeur par défaut: 2.

Lorsque l'élément arrive dans le viewport, la propriété prend la valeur INITIAL
À l'endroit du viewport déterminé par data-end (au milieu par défaut), la propriété prend la valeur FINAL.

On peut aussi déterminer les propriétés à animer en javascript :
var monParallax = new RegalParallax( document.querySelector('.element'), {'y':'110#0', 'x':'-30#0', 'end':'4'});
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.