9-Parallaxe intermédiaireVoici un exemple d'un parallax sur l'arrère-plan:
Voici un exemple vraiment intéressant de isladjan pour vous inspirer un peu.
Pour animer en parallaxe, vous le savez, les couches les plus près de nous vont bouger plus rapidement que les couches plus loin de nous.
Cependant, lorsqu'on travaille avec une synchonisation du scroll, étant donné que la vitesse d'animation est unique et correspond à la vitesse du défilement de l'utilisateur, les images plus près vont bouger sur une plus grande distance que les images qui sont éloignées.
Si vous positionnez vos éléments en position: absolute dans son conteneur qui a lui, une position: relative, n'oubliez pas de leur accorder un z-index en fonction de l'ordre des couches que vous souhaitez établir (plus le z-index est grand, plus l'élément se retrouve au dessus).
Après avoir bien positionné vos éléments en css, avec GSAP et scrollTrigger, il vous suffira d'ajouter un coéficient de vitesse au mouvement désiré.
Par exemple, si un élément bouge vers la droite de 100px sur l'axe des x, alors pour le mouvement de l'arrière plan, vous pourriez multiplier ce 100px par un coéficient moindre, par exemple 0.5. Ainsi l'arrière-plan bougerait 2x moins vite que l'élément en avant-plan. En fait, comme la vitesse n'est pas en jeu dans le scroll, on peut dire que l'arrière-plan se déplace sur une moins longue distance par rapport à l'élément en avant plan.
Voici un exemple d'utilisation de ce principe de coéficient :
Autre exemple avec plusieurs couches (allez voir le javaScript) :