GSAP Parallax - Ballons dans le ciel

Pour cet exercice, nous allons utiliser scrollTrigger pour faire un effet parallax de 3 couches avec les nuages et les ballons.

Aperçu du résultat 👇

Matériel Pen de départ Vous n’avez qu’à ajouter JavaScript (de pas modifier le HTML ou le CSS). Par contre, il est fortement conseillé de jeter un oeil au CSS et HTML pour comprendre la structure.

Les librairies GSAP et ScrollTrigger sont déjà inclues dans le Pen, vous laissant ainsi vous concentrer sur l'animation GSAP à réaliser.

Requis Pour chaque élément ayant la classe .parallax-bg, récupérez leur valeur de l'attribut de donnée data-vitesse et stockez les, chacune dans une variable. Au défilement de la page, faites en sorte que les 3 couches ayant chacune la classe .parallax-bg se déplacent sur l'axe vertical vers le haut, à des vitesses différentes (utilisez vos variables de l'étape 1), afin de simuler l'effet de profondeur. Faites en sorte que l'animation reviennne en arrière si on remonte, qu'elle soit syncronisée avec la position de la barre de défilement de la page. Notes de cours 📚
Récupérer la valeur d'un attribut d'une balise HTML Qu'est-ce que le parallaxe