L’être humain est comme ça, il aime le mouvement, et les petits gadgets visuels. Surtout sur internet.
Pendant un bon moment, faire des animations sur son site impliquait forcément du « Flash ». ( souvenez vous … )
Maintenant que le Flash a été bannis des habitudes web ( notamment par Apple et ses iDevices) , il a fallu se tourner vers d’autres technologies.
L’une d’elle, déjà largement utilisée pour le design, est beaucoup moins connue pour faire des animations: il s’agit du CSS3.
D’autre solution sont aujourd’hui possible , via des librairies Javascript (Lotties par exemple), mais implique de charger coté client la dite librairie afin de les exécuter, ce qui peut poser des questions de performance.
Voici donc une petite liste non exhaustive de transitions et animations CSS3, afin de vous puissiez découvrir ce qu’il est possible de faire ( et vous donner un peu d’inspiration). Par contre , n’oubliez pas cette règle très importante : « Trop d’animations, tue l’animation… ». Il faut rester subtil !
Des boutons
Dégradé de couleurs lors du passage de la souris Animation infinie avec déplacement et disparation/apparition d’un élément graphique Bouton avec un effet 3D au moment d’appuyer dessus
Survolez-moi
Bouton rond avec un effet « Pulse » Bouton avec un texte qui apparait en « coulissant »
Des vignettes de photos
Vignette image avec du contenu qui s’affiche au passage de la souris et un effet zoom.
Vignette image qui devient floue au passage de la souris
Vignette image en noir et blanc qui redevient en couleur au passage de la souris. Il est aussi possible d’appliquer un filtre sépia, de modifier le contraste, ou la luminosité de l’image.
Des animations de chargement
Animation de chargement avec transformation 3D. Utilisable aussi avec une image coupée en 4.
Animation de chargement en mode « equalizer ».