Vous souhaitez dynamiser votre site web ? Avoir une interface plus moderne qui interagit directement avec les actions de vos utilisateurs ?
Vous aimez le parallax, les effets de transitions ou encore les Hover effects. Dans cet article, nous vous dévoilons nos 6 techniques pour animer votre site web comme un pro !
Les types d’animations
En termes de Web design, vous retrouverez sur internet différents sites web, avec des animations plus ou moins poussées en fonction de la technologie utilisée par votre entreprise. Par exemple, pour des sites conçus sur des CMS, on retrouvera généralement des animations assez basiques qu’on appellera ici des animations « fondamentales ».
Bien évidemment, certains CMS comme Webflow ou Framer, spécialisés en “créative design”, vous permettront d’implémenter des fonctionnalités et animations plus avancées. Certain page builders comme Elementor seront également adaptés pour animer certains éléments de votre site WordPress.
Les animations fondamentales
1. Animations navigationnelles
Vous les avez forcément déjà rencontrées. Les animations liées à la navigation sont désormais omniprésentes sur la plupart des sites web. On parlera ici d’hover sur les liens internes (changement de couleur) ou encore d’effets déroulants des menus par exemple.
2. Les micro-interactions
Les micro-interactions sont souvent utilisées pour animer des boutons au survol par exemple, afin d’inciter aux clics. On retrouvera le plus souvent des changements de couleur de fond, de bordure, d’échelle ou encore de position.
source : Abron Studio
3. Les loaders
On pourra également retrouver dans cette catégorie toutes les animations liées au chargement d’une page ou de résultats.
source : Yeasin Arafat
Les animations avancées
4. Les animations séquentielles
Les animations séquentielles sont des effets permettant d’afficher des éléments comme des images, textes, etc. les uns après les autres dans un ordre bien précis.
À titre d’exemple, pour une page d’accueil, on pourrait imaginer :
- Logo apparaît en premier
- Puis le titre principal fade in
- Suivi du sous-titre
- Enfin les boutons d’action
Vous avez sûrement déjà vu cet effet très moderne, mais attention à ne pas en abuser, un site avec des apparitions d’éléments à chaque scroll pourrait devenir déroutant pour vos utilisateurs.
Source : Irfanaffian
5. Les scroll-triggered
Le nom paraît complexe, mais il s’agira ici tout simplement des animations de votre page liées au scroll.
Parmi ces animations, une des plus connues dont vous avez sûrement déjà entendu parler : « le parallax ». Animation très à la mode, utilisée par le géant multinational Apple, le parallax est la définition même du scroll triggered.
On retrouvera également des animations plus légères comme par exemple les timelines de défilement.
6. Les animations Json
Les animations JSON sont des effets permettant d’intégrer via l’ajout d’un extrait de code, des animations vectorielles directement dans votre site web.
Vous les avez sûrement déjà croisées sur des sites web, notamment pour animer :
- Des illustrations de page d’accueil
- Des icônes interactives
- Des états de chargement personnalisés
Nos références pour animer votre site web
les plateformes d‘animations
Lottiefiles
LottieFiles est devenue LA référence pour vos animations vectorielles ou encore pour incruster des pictos et icones animés sur votre site web.
Vous retrouverez sur leur site, des milliers d’animations gratuites prêtes à l’emploi.
Lordicon
Vous cherchez une bibliothèque d’icônes animées ? Lordicon vous permettra en quelques secondes d’intégrer dans votre menu et vos pages des icônes interactives et 100% personnalisables !
Les plugins WordPress
Elementor
Classé parmi nos top plugins, Elementor est LA référence des pages builder sur WordPress. Si vous utilisez ce CMS et que vous désirez inclure des animations modernes, Elementor saura répondre à vos attentes.
Un point néanmoins important à noter, pour profiter de l’ensemble des animations natives d’Elementor, vous devrez opter pour la version Pro.
Bien que la version gratuite offre déjà de belles possibilités, c’est dans sa version premium que vous pourrez utiliser l’intégralité de ses features.
CSS Hero Animations
Parfait pour les débutants, CSS Hero Animations vous permettra d’ajouter à vos titres et aux elements de vos pages des animations sans repenser complètement votre structure actuelle et otu ça totalement gratuitement !
Les CMS
Weblfow
Vous recherchez une alternative à WordPress offrant des animations plus poussées ? Webflow pourrait bien être la solution !
Sans écrire la moindre ligne de code, vous pourrez créer des transitions fluides, ajouter du parallax et des interactions poussées, directement depuis votre page builder.
Framer
Un peu comme son concurrent Webflow, Framer offre beaucoup de possibilités en matière d’animations. Son véritable point fort ? L’intégration native avec Figma !
En quelques clics, importez vos designs depuis Figma et animez-les grâce aux fonctionnalités de Webflow.
Les risques d’une animation trop importante
Temps de chargement
Attention à ne pas trop en faire ! Les animations, aussi belles soient-elles, peuvent rapidement alourdir votre site.
Essayez d’optimiser systématiquement vos animations et testez leur impact sur la vitesse de chargement. N’oubliez pas qu’un utilisateur attend rarement plus de 3 secondes avant de quitter une page…
Mauvaise expérience utilisateur
Veillez à ce que vos animations restent subtiles et apportent une réelle valeur ajoutée à votre site web. Évitez les effets trop longs ou trop présents qui pourraient être déroutants pour vos utilisateurs.
La compatibilité responsive (tablette / mobile)
Il sera important de toujours vérifier le rendu de vos animations sur chacun de vos affichages (mobile, tablette et desktop). À titre d’exemple, les effets de « parallax » peuvent avoir un très beau rendu sur la version ordinateur de votre site web, mais peuvent être complètement catastrophiques sur mobile.
Un conseil, adaptez vos animations en fonction de vos devices !
