Exercice : Zombi¶

Utilisation de l'IA interdite pour cette activité. Faites chauffer vos méninges!

Obtenir votre dépôt (5 min)¶

Accepter l'exercice dans Classroom 50

1. Ouvrez le lien ci-dessus, connectez-vous avec Sign in with GitHub, puis acceptez l'exercice.
2. Clonez votre dépôt et ouvrez-le dans VS Code.
3. Ouvrez index.html avec Live Server.

Pas de npm install : GSAP est chargé par CDN, avec une balise <script> dans index.html, avant js/script.js. Comme dans votre récit.

Tout votre code va dans js/script.js. Ouvrez aussi index.html et repérez l'image du coeur : notez sa classe CSS, c'est la cible de l'animation.

Aperçu du résultat¶

Animation A : le coeur (5 min)¶

Un premier tween (interpolation)¶

• Avec gsap.to(), animez le coeur : agrandissement à 1.2 fois sa taille (scale), en 0.6 seconde.

La répétition¶

• Ajoutez le paramètre repeat pour que l'animation se répète à l'infini.

L'aller-retour¶

• Ajoutez le paramètre yoyo : le coeur revient en douceur à sa taille d'origine.

Le lissage¶

• Ouvrez le visualiseur d'eases de GSAP et essayez des lissages pour arriver au résultat de la vidéo. Ne regardez pas la réponse tout de suite!

• Commit (Animation A : le coeur bat), puis push.

Animation B : le fond (5 min)¶

• Sous l'animation du coeur, animez la couleur de fond du body avec gsap.fromTo() :
  • couleur de départ : #838B2F;
  • couleur d'arrivée : #BDAF88;
  • durée de 2.4 secondes;
  • répétition à l'infini, en aller-retour.

gsap.fromTo("cible",
  { /* valeurs de départ */ },
  { /* valeurs d'arrivée + paramètres */ }
);

• Commit (Animation B : le fond change de couleur), puis push.

Défi du zombi (facultatif)¶

• Ajoutez une légère rotation au coeur pendant qu'il bat : quelques degrés seulement.
• Commit (Défi : le coeur tourne), puis push.

Je vois votre dépôt et vos commits dans Classroom 50.

L'exercice suivant : Magie

Exercice adapté, avec sa permission, de l'exercice du même nom du cours Web 3 (582-311), TIM Montmorency.