Dino

L'objectif de cet exercice est de mettre en pratique les notions AnimeJS suivantes :

• contrôle de lecture
• animation de variable css

Résultat attendu

Consignes

• Effectuer un fork du Codepen de départ
• Ajouter une variable isJumping configurée à false

Background

• Animer la variable css --posx à précisément -2373 (la largeur de l'image)
• Durée de 6 sec
• Lissage linéaire
• Boucle infinie

Cactus

• Animer le cactus de droite à gauche
• Durée de 4 sec
• Lissage linéaire
• Boucle infinie

Dino

• Ajouter une animation pour faire sauter le dino et placez la dans une variable jump
• L'animation ne doit pas se déclencher au chargement de la page
• Boucle 1 seule fois
• Effet allé-retour
• Durée de 300 ms
• y = -200
• Dans un callback onComplete, on doit appliquer false à la variable isJumping

Interactivité

• Ajouter un eventListener au clic du document
• Si la variable isJumping est à true, on effectue un return
• Sinon, on lui donne la valeur true et on déclenche la fonction restart() de l'animation.