AddEventListener() Scroll - Karate Kid

Pour cet exercice vous devrez synchroniser le défilement vertical de la page ↕️ avec la tête de lecture d’un extrait du film Karate Kid 🥋.

Aperçu du résultat 👇

Matériel

Pen de départ 

Requis

  1. Au scroll, récupérer la position de la page sur l'axe des Y.

  2. Comparer cette valeur à la hauteur de la page afin d'obtenir un ratio correspondant au pourcentage de défilement de la page (chiffre entre 0 et 1).

  3. Multiplier ce ratio par la durée de la vidéo et stocker cette valeur dans une variable.

  4. Assigner cette valeur à la propriété currentTime de la vidéo afin de la synchroniser au défilement de la page.

Notes de cours 📚