Aller au contenu

Cosmos

L'objectif de cet exercice est d'appliquer les connaissances relatives au « onScroll », au « draggable » et aux animations de texte AnimeJS.

Résultat attendu

Instructions

Debug

N'oubliez pas qu'il est possible d'activer l'option debug pour la portion autoplay d'une animation.

  • Effectuer un fork du Codepen de départ
  • Le height du header doit s'animer de façon synchrone avec le scroll de la page. Utiliser .spacer1 comme cible et body comme contenant.
  • Les planètes doivent être déplaçable avec la souris. Utiliser une boucle forEach pour appliquer la fonctionnalité.
  • Le texte en bas de page doit s'animer lorsque le scroll atteint cette partie. Utiliser footer comme cible et body comme contenant.