Éclipse

L'objectif de cet exercice est de mettre en pratique les notions Zdog et AnimeJS dans un même projet.

Résultat attendu

Consignes

• Effectuer un fork du CodePen de départ
• Afficher une illustration zdog sur l'élément .zdog-canvas
• Ajouter une Hemisphere, d'un diamètre de 50, avec la couleur #eeaa11 et le backface à #000
• Créer un objet javascript dans une variable avec les paramètres suivants : y, zoom

Avec anime js, animer la variable créée en modifiant ses paramètres :

• Durée aléatoire entre 300 et 2000ms
• y aléatoire entre -2π et 2π
• zoom aléatoire entre 1 et 4
• Animation en boucle
• Dans la fonction onUpdate, appliquer les valeurs y et zoom sur l'illustration
• À chaque boucle, faire un refresh pour appliquer de nouvelles valeurs aléatoires

En CSS

• Ajouter le style mix-blend-mode: color-dodge; au canvas du zdog