AddEventListener() Scroll - The Simpsons

Pour cet exercice vous devrez synchroniser la position du lit d’hôpital d’Homer avec la direction de défilement vertical de la page ↕️.

Aperçu du résultat 👇

Matériel

Pen de départ 

Requis

  1. Écouter l'événement "scroll" sur l'élément window.

  2. Si la valeur de window.scrollY est plus grande que sa précédente valeur et que la variable goesUp est à true:

    • Retirer la classe .up et ajouter la classe .down à <body>.

    • Démarrer la lecture de la vidéo stockée dans la variable videoGoesDown.

    • Assigner la valeur false à la variable goesUp afin d'éviter que cette opération ne soit ré-exécutée tant que la direction du scroll n'aura pas changée.

  3. Si la valeur de window.scrollY est plus petite que sa précédente valeur et que la variable goesUpest à false:

    • Retirer la classe .down et ajouter la classe .up à <body>.

    • Démarrer la lecture de la vidéo stockée dans la variablevideoGoesUp.

    • Assigner la valeur true à la variable goesUp afin d'éviter que cette opération ne soit ré-exécutée tant que la direction du scroll n'aura pas changée.

  4. Mettre à jour la valeur de la variable previousY à la fin de chaque événement scroll.

Notes de cours 📚