Calendrier de l'Avent animé

Je passe ici en revue 4 idées pour animer le module Advent Calendar de H5P qui combinent l’animation d’images de Canva et la modification de la feuille de style du module. Pour information, mon exploration des CSS pour modifier l’aspect visuel du calendrier et l’animer se poursuit sur cette page.

Animer avec la neige

Le premier calendrier de l’Avent que j’ai conçu était destiné à ma fille de 6 ans. Chaque case affiche le début d’une courte histoire, un lien vers sa version « vidéo » et un autre vers le texte à lire en ligne. Une fois les 24 illustrations rassemblées, je les ai éditées sur Canva en leur appliquant, au hasard, une couleur issue de la palette de 7 teintes que j’avais au préalable sélectionnées. Pour casser l’aspect statique du calendrier, j’ai activé l’effet de la neige qui tombe : d’ordinaire, elle donne au calendrier un air plus festif et vivant.

Pour ce premier essai, j’ai procédé à quelques modifications mineures dans la CSS :

Pour que l’image de fond ne soit pas cachée une fois les cases ouvertes, j’ai rendu le fond des cases quasi transparent.
J’ai modifié l’apparence de la date du jour dans la case ouverte pour qu’elle s’affiche en blanc et légèrement en relief grâce à l’ombrage.
J’ai caché l’icône de contenu des cases (vidéo, lien, texte, image… ) : comme c’était toujours la même, l’afficher n’était pas utile.
Pour alléger le visuel, j’ai caché les battants des cases ouvertes.
J’ai remplacé la couleur noire du calque sous les popups par un rose saumon pour l’assortir à la tonalité pastelle du thème.
Enfin, j’ai modifié l’apparence des liens.

En raison de la clarté du fond et des icônes que j’ai utilisés, l’animation de la neige est à peine visible. J’ai donc remplacé, dans la CSS, l’image du flocon utilisé par défaut par une autre que j’ai légèrement agrandie :

On obtient une neige beaucoup plus visible :

En fait, on peut substituer au flocon n’importe quelle image pour faire tomber des cadeaux, étoiles ou pères Noël… comme le montrent ces captures :

Des icônes animées

Pour mon deuxième essai, j’ai déniché ou bidouillé ces éléments dans Canva :

En image de fond : un dégradé nocturne
Pour les cases fermées : l’illustration d’une porte médiévale en bois à double battant
Pour les cases ouvertes : un set de 24 icônes assorties dans un camaïeu de bleus, sur le thème de l’hiver

Chaque case découvre un strip dessiné par Martin Vidberg pour les calendriers de l’Avent de la boutique Philibert depuis 2016 : j’ai sélectionné les plus drôles pour créer un « best-off » sur le thème des jeux de société et de la création ludique.

J’ai dû faire un peu plus de modifications de la feuille de style :

Le fond des cases étant par défaut blanc opaque, j’ai commencé par le rendre transparent.
Ensuite, j’ai ajusté l’emplacement du numéro sur les portes, atténué son ombrage un peu trop tranché à mon goût, bloqué l’affichage des icônes de contenu (comme toutes les cases comportent des BD, cette icône m’a paru redondante) et caché les battants des cases ouvertes.
Pour finir, j’ai assorti la couleur du calque sous les popups à la couleur dominante du calendrier.

Cependant, je trouvais que le calendrier obtenu manquait de « punch »… Pour lui insuffler un peu de vie, j’ai eu l’idée d’animer les icônes dévoilées en ajoutant à chacune une touche d’éclat : à cette fin, j’ai superposé, dans Canva, à l’icône statique initiale un gif animé blanc scintillant, étoilé ou brillant. Cette simple manipulation suffit à donner au calendrier un air plus chic et festif ! Animer les icônes est une bonne façon de booster un contenu inerte.

Des cases animées

Autre méthode : animer les cases visibles du calendrier pour que ce dernier apparaisse en mouvement dès l’affichage, même quand aucune case n’est encore ouverte. Après avoir déniché un set de 24 cases numérotées sur Canva, j’ai animé les icônes en créant pour chacune un déplacement unique dont j’ai modulé la vitesse dans un souci de variété. J’ai exporté les 24 icônes au format .gif et les ai chargées dans le module Advent Calendar de H5P.

Il me restait à créer les images dévoilées à l’ouverture des cases. À l’inverse des précédentes, je les voulais statiques et plutôt low key. J’ai donc appliqué aux mêmes icônes, dans Canva, un filtre « niveau de gris » pour désaturer leurs couleurs. Après avoir exporté ces 24 icônes statiques en NB, je les ai placées en fond de chaque case. And voilà !

Pour optimiser l’affichage, j’ai modifié à la marge la CSS du module Advent Calendar, à savoir :

J’ai rendu transparent le fond des cases – par défaut opaque.
J’ai bloqué l’affichage des icônes de contenu et caché les battants des cases ouvertes.
J’ai assorti la couleur du calque sous les popups à la couleur dominante du calendrier.

Un fond animé

Ce 4e exemple illustre une dernière façon d’animer le calendrier de l’Avent de H5P : en animant le fond. J’ai créé ce ciel étoilé scintillant dans Canva en superposant des gifs d’amas étoilés animés à un fond violet uni. L’animation des étoiles n’étant pas synchronisée, l’effet ne fait pas trop artificiel. J’ai voulu tester ce que donneraient des fenêtres rondes : j’ai donc créé 24 boules numérotées. Les fenêtres s’ouvrent sur 24 icônes animées : il s’agit des icônes bleues utilisées pour le 2e calendrier, dont j’ai basculé la teinte dans une tonalité violette et fuchsia et que j’ai animées dans Canva comme je l’ai montré plus haut.

Pour ce qui est de la CSS, j’ai modifié peu de choses :

En plus de rendre transparent le fond des cases, je l’ai arrondi (pour éviter que l’animation ne « déborde » des boules).
J’ai bloqué l’affichage des icônes de contenu et caché les battants des cases ouvertes.
J’ai modifié l’opacité et la teinte du calque sous les popups.

Ces techniques permettent d’animer le calendrier de l’Avent H5P en créant des visuels animés eux-mêmes. Mais il est possible d’animer le calendrier autrement : en utilisant les animations CSS, ce que j’ai fait dans cette série d’exemples.