Cours 14¶
Exercices de préparation à l'examen final. Voici quelques ressources pour vous aider :
- https://gsap.com/resources/getting-started/Staggers/
- https://gsap.com/docs/v3/Eases/
- https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_loops1
- On peut modifier le curseur de lecteur d'une vidéo en manipulant l'attribut
currentTimede la vidéo. - https://gsap.com/docs/v3/GSAP/Timeline/to()
- https://gsap.com/docs/v3/GSAP/Timeline/fromTo()
Stagger¶
- Effectuer un fork du codepen de départ.
- En JavaScript, effectuer une animation et un effet stagger sur les enfants du
.wrapper.
Boucle et stagger (débutant)¶
- Effectuer un fork du codepen de départ.
- En CSS, ajouter un effet de dégradé en bas du
.wrapper. - En JavaScript, à l'aide d'une boucle, ajoutez des enfants à
.wrapper. Le nombre d'itération de la boucle doit simplement être estimé. - En JavaScript, effectuer une animation et un effet stagger sur les enfants du
.wrapper.
Boucle et stagger (intermédiaire)¶
- Effectuer un fork du codepen de départ.
- En CSS, ajouter un effet de dégradé en bas du
.wrapper. - En CSS, ajouter une variable
--row-heightet donner lui la valeur100px; - En CSS, remplacez les mentions 100px (taille des images) par la variable créée.
- En JavaScript, modifier la valeur de la variable
--row-heightpar une valeur de votre choix (ex:50px); - En JavaScript, déterminer le nombre d'itération d'une boucle (le nombre d'images à ajouter) en fonction de la taille d'écran et de la valeur de
--row-height. - En JavaScript, à l'aide d'une boucle, ajoutez des enfants à
.wrapper. - En JavaScript, effectuer une animation et un effet stagger sur les enfants du
.wrapper.
Dorohedoro (ScrollTrigger)¶
- Effectuer un fork du codepen de départ.
- En JavaScript, effectuer une animation qui permet de faire défiler la vidéo en même temps que le scroll de la page.
Monsieur Sandwich (ScrollTrigger)¶
- Effectuer un fork du codepen de départ.
- Animez la page de sorte à reproduire les animations dans l'aperçu.