Fenêtres rondes
Après avoir testé 4 premières méthodes pour animer le calendrier de l’Avent H5P, je continue mes expérimentations avec ces 3 calendriers que j’anime, cette fois, avec des instructions CSS. Pour cette série, je me suis donné une contrainte : arrondir les fenêtres pour leur donner l’aspect de boules de Noël.
Les 24 « surprises », identiques pour les 3 calendriers, sont des gifs animés sur le thème de Noël que j’ai trouvés, entre autres, sur Pinterest.
Plusieurs tailles de fenêtres
Ce calendrier a des fenêtres rondes, animées, dont je fais varier la taille grâce à la feuille de style.
J’ai conçu les fenêtres rondes dans Canva en insérant 24 icônes d’un set de « mignonneries » de l’Avent dans un disque blanc. J’ai ensuite animé les images obtenues selon la méthode présentée ici et les ai exportées au format .gif avec arrière-plan transparent. Les images ont toutes la même taille à l’origine, mais j’utilise la propriété « transform:scale » dans la CSS pour donner l’impression qu’elles existent en 3 tailles :
La fenêtre s’ouvre sur une pastille ronde, d’un beige transparent, avec une bordure pointillée. Elle affiche juste la date du jour en blanc, avec un léger relief. Ces effets sont créés dans la CSS :
Les autres modifications de style sont plus traditionnelles :
- J’ai caché l’icône de contenu des cases (vidéo, lien, texte, image… ) qui aurait été redondante, car toujours identique.
- J’ai caché les volets des cases ouvertes.
- J’ai changé la couleur du calque sous les popups.
En faisant varier la taille des boules, on simule en fait la disposition des calendriers « papier » de l’Avent, dont les cases sont souvent de différentes tailles.
Boules de Noël qui oscillent
Ce calendrier a 24 fenêtres rondes qui oscillent à différentes vitesses. L’idée était de créer un effet « boules de Noël » suspendues dans le sapin 😉
J’ai conçu le fond vert sapin dans Canva à partir d’un motif de flocons répété, ainsi que les fenêtres rondes en insérant dans un disque blanc un set d’icônes dont j’ai fait varier la couleur. J’ai ajouté à ces pseudo-boules de Noël une ombre externe avec la propriété CSS box-shadow pour créer un léger relief, ainsi qu’un mouvement d’oscillation, horaire et anti-horaire, défini par les animations CSS rotate-in et rotate-out. Pour éviter que l’animation soit identique pour toutes les boules, j’ai différencié le degré d’inclinaison des boules et leur vitesse de rotation en fonction de leur emplacement (pair, impair, 2n+1 ou 5n+1) dans le calendrier :
La case ouverte affiche l’aperçu de son contenu sous la forme d’une image arrondie grâce à la propriété CSS border-radius. Pour simuler la rotondité d’une boule de Noël, j’ai ajouté une ombre portée interne avec la propriété CSS « box-shadow:inset ». Enfin, j’ai caché l’icône de contenu de la fenêtre, qui aurait été redondante car toujours identique, et les battants ouverts :
J’ai animé ici des fenêtres rondes car c’était la thématique que je m’étais imposée pour cette expérience, mais on peut, bien entendu, animer avec la même technique les cases du calendrier initialement carrées.
Boules de Noël qui pulsent
Cet exemple montre comment utiliser les CSS pour arrondir les cases du calendrier, les animer et en modifier aléatoirement les couleurs.
Là encore, j’ai commencé par concevoir dans Canva un fond à motifs et les fenêtres rondes : j’ai inséré un set d’icônes de l’Avent dans des disques blancs.
J’ai utilisé l’animation CSS heartbeat pour faire « pulser » les pseudos-boules de Noël. J’ai décliné cette animation en 6 versions de durée variable : cela évite que le mouvement soit uniformément synchronisé :
Les fenêtres ouvertes affichent la date en blanc sur un fond de couleur variable. La propriété CSS border-radius m’a permis de les arrondir, de les orner d’une fine bordure blanche et d’incliner la date qu’elles affichent à divers degrés.
J’ai aussi extrait de la palette des icônes 4 couleurs (rouge, bleu, orange, beige) que j’ai aléatoirement affectées aux boules grâce au pseudo-sélecteur nth-child. J’ai pris le parti de ne pas animer les cases ouvertes et de réduire leur taille au moyen de la propriété CSS transform:scale.
Enfin, j’ai choisi de n’afficher ni l’icône de contenu de la case ni ses battants ouverts :
A travers ces 3 réalisations, j’ai mesuré la puissance des propriétés CSS quand il s’agit de modifier l’aspect visuel du calendrier de l’Avent H5P et de l’animer, même s’il ne contient que des images statiques. Comme tous les effets peuvent être combinés, cela donne une infinité de possibilités qu’il me reste encore à explorer…
