8-Parallaxe

Parallaxe avec scrollTrigger

D'abord, voici un rappel, qu'est-ce que le parallaxe, nous l'avons vu un session antérieure.

Qu'est-ce que le parallaxe

Le moyen le plus simple de créer un effet de parallaxe avec ScrollTrigger est de modifier la position de l'image de fond (background-image). Ainsi, on pourra déplacer sa position du haut (top) de l'image d'arrire-plan, vers sa position du bas (bottom).

Mouvement vertical Pour une section d'un site qui est, plus souvent qu'autrement, en mode paysage (plus large que haute), il serait mieux de sélectionner une image en mode portrait (plus haute que large).

Pour les réglages CSS

On place la position verticale à 0% ou 0px.
Et si on souhaite la centrer à l'horizontal, on place la position horizontale à 50%, à vous de décider.

#section-parallax{ background-image: url("chemin/acces/image.jpg"); background-size: cover; /* ou 200% pour augmenter l'effet, si l'image originale est assez grande */ background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 0%; }

Remarquez que le la propriété background-attachment est à scroll

Background-attachment

Et pour le code JavaScript :

gsap.to("#section-parallax", { backgroundPosition: "50% 100%", ease: "none", scrollTrigger: { trigger: "#section-parallax", start: "top bottom", end: "bottom top", scrub: true, markers: true } });

Tout d'abord, nous sélectionnons l'élément que nous voulons animer : #section-parallax . Il peut s'agir d'un ID ou d'une classe.

Avec GSAP, je vous le rappelle, il possible d'animer la majorité des propriétés CSS. Cependant, il est nécessaire de remplacer les traits d’union "-" par une nomenclature camelCase 🐫. Comme dans ce cas-ci, background-position devient backgroundPosition .

Nous souhaitons que la position de son arrière-plan background-position se déplace de "50% 0%" à "50% 100%". Il ira donc du haut vers le bas.

Pour l'effet de lissage de vitesse (ease), nous le réglons sur none , afin qu'il soit linéaire.

C'est tout pour l'animation.

Nous devons ensuite définir les propriétés du ScrollTrigger.

Le déclencheur est le même élément, nous pouvons donc entrer le même ID ici.

L'animation commencera lorsque le haut de la section #section-parallax atteindra le bas de la page, et se terminera lorsque le bas de la section atteindra le haut de la page. Comme vous le savez déjà, il s'agit des paramètres par défaut, mais il est important de comprendre comment ils fonctionnent.

L'option scrub est réglée sur true, ce qui signifie que l'animation sera liée à la barre de défilement.

On affiche les marqueurs (markers) afin de voir le comportement, nous pourrons les enlever une fois satisfait du résultat.

Résultat

Bien entendu, vous pouvez aussi faire le contraire, c'est à dire styliser la position vertical à 100% par défaut (css) et changer la position avec GSAP à 0%. Le mouvement de l'image sera inversé.

Mouvement horizontal

Et si nous le déplacions de droite à gauche ?

Nous fixons donc la position horizontale à 0%, et nous la déplacerons à 100 % :

#section-parallax{ background-image: url(chemin/acces/image.jpg); background-size: cover; /* ou 300% pour augmenter l'effet, si l'image originale est assez grande */ background-repeat: no-repeat; background-attachment: scroll; background-position: 0% 50%; } gsap.to("#section-parallax", { backgroundPosition: "100% 50%", ease: "none", scrollTrigger: { trigger: "#section-parallax", start: "top bottom", end: "bottom top", scrub: true, markers: true } }); Taille et autres paramètres animables à explorer

Nous pouvons tout déplacer. Cette fois, nous ne changeons pas la position de l'image d'arrière-plan mais la taille.
Et nous ajoutons un texte parce que, pourquoi pas?

Et pour ce texte, nous allons initialement le cache en dehors du cadre à gauche avec transform: translateX(-100%);: