Aller au contenu

La ferme des animaux

La Ferme des animaux de George Orwell est une fable politique où des animaux se révoltent contre leurs maîtres humains pour instaurer une société égalitaire. Peu à peu, les cochons prennent le pouvoir et reproduisent les mêmes injustices qu’ils dénonçaient, illustrant la corruption du pouvoir absolu.

L'objectif de cet exercice est de faire courser les animaux. Pour ce faire, vous devrez faire usage des notions suivantes :

  • utils : Pour appliquer un aléatoire sur la durée de l'animation
  • irregular : Pour un lissage irrégulier (ease)
  • offsetWidth : Pour déterminer la distance à parcourir sur l'axe des x
  • addEventListener : Pour déclencher l'animation

Résultat attendu

Cliquer pour démarrer l'animation

Consignes

  • Effectuez l'installation de base pour un projet AnimeJS
  • Télécharger les images
  • Dans index.html, ajouter une div avec la classe race
  • Dans la div, ajouter les images des animaux
  • Finir l'exercice 😜

Indices

Ligne d'arrivé

La ligne d'arrivée est faite en CSS. Voici le code du background :

CSS
background: repeating-conic-gradient(#fff 0 25%, #c00 0 50%) 0 0 / 25px 25px;

Durée

La durée de l'animation pour chaque image est aléatoire

Lissage

Le lissage de l'animation est irrégulier !!