Pour cet exercice, nous allons synchroniser le générique de l’émission Gotham avec le défilement de la page.
Aperçu du résultat 👇
Matériel
Pen de départ
Vous n’avez qu’à ajouter JavaScript (nul besoin de modifier le HTML ou le CSS).
Les librairies GSAP et ScrollTrigger sont déjà incluses dans le Pen de départ.
Afin de nous assurez que la vidéo est bien terminée de chargée, tout le code de cet exercice devra êtres inclut dans l’événement "loadedmetadata".
Requis
Au défilement de la page, faites en sorte que le lecteur vidéo se fige au centre de l'écran.
Déplacez la tête de lecture de la vidéo en fonction de la progression du défilement de la page. Lorsque le start croise le scroller-start, le générique devrait-être au début et lorsque le end croise le scroller-end le générique devrait être rendu à la fin.
Notes de cours 📚
Audio & vidéo