L'Ecole By CCI, Gobelins Annecy 2022

Développer une animation

• Fin du challenge ⌛️ : 14 Février 2022
• Développement : HTML + CSS + Javascript
• Rendu : Fichier .zip avec les fichiers de votre projet ou 🔗 lien vers un repertoire git public

Pour intégrer une maquette, il faudra également être capable de créer des animations, et donc de les développer. Pour cela il existe des outils.

Pour ce challenge vous devrez développer une animation simple mais qui a son lot de subtilités.

Vous devrez respecter ce que l'on appelle le "easing" c'est à dire la formule mathématique permettant de rendre une animation "douce" à l'oeil. Mais aussi un temps d'animation cohérent ainsi que de conserver une interaction avec l'objet qui bouge.

L'animation à intégrer

✅ Étapes à respecter

• Créez un projet web simple HTML + CSS (un fichier index.html, un fichier style.css)
• Utiliser une bibliothèque d'animation tel que AnimeJS. https://animejs.com/, mais vous êtes libre d'en utiliser d'autres.
• Rajouter un compteur de "clique raté" indiquant combien de fois l'utilisateur à essayé de cliquer sur le bouton.
• Au bout de x cliques ratés laissez l'utilisateur cliquer et envoyer le sur un site de votre choix.

Ressources à consulter

• Les différentes courbes "d'easings" illustrées
• Les courbes d'easing dans AnimeJS
• La documentation d'AnimeJS

🥇 Podium

Pour établir le podium, chaque participant devra voter pour la/les meilleure(s) production(s).

Vous aurez tous 5 points à distribuer, avec Coralie nous aurons chacun 10 points à distribuer.