Animer son site internet
Cet article présente quelques animations basiques, simples à intégrer, qui peuvent donner un air dynamique à votre site internet.
Les Animations d’entrée
L’animation d’entrée anime un élément au moment de son affichage. Elle permet un rendu dynamique sans poluer la lecture par la suite. Elle peut également être utiliser pour accentuer la hiérarchie de l’information.
Les Scroll effect
Les animations liés au défilement (molette de la souris par exemple) amènent une note très design mais sont plus lourde visuellement car toujours active, elle sont donc à utiliser avec parcimonie.
Tips
Pour un rendu fluide et esthétique, priviligiez les animations lentes. Utilisez un délais avant le lancement de certaines animations pour créer un ordre d’affichage et affirmer une hiérarchie.
A savoir
Les animations offrent certes un dynamisme et une esthétique mais peuvent parfois avoir un effet négatif sur la vitesse de chargement, la note de performance, et le référencement du site web.
Scroll effect horizontal
Créez un scroll effect légèrement différent sur chaque élément pour ajouter du style. (Ici associé à un parallaxe sur le BG)
Animation 1
Background
effet parallaxe
L’image de fond et le contenu ne défilent pas au même rythme.
Animation 4
Zoom arrière
L’animation « facilité d’entrée » en fondue est très légère, esthétique, elle permet d’afficher le contenu du site au fur et à mesure en donnant un effet dynamique tout en restant subtil.
Animation 2
Facilité d’entrée : fondue
L’animation « facilité d’entrée » en fondue est très légère, esthétique, elle permet d’afficher le contenu du site au fur et à mesure en donnant un effet dynamique tout en restant subtil.
Animation 3
Background effet parallaxe
L’image de fond et le contenu ne défilent pas au même rythme.
Animation 4
Animation 5
Animation d’entrée – plier – gauche – 1000ms
Animation 6
Animation d’entrée – diapo – droite – 1200ms
Animation 6
Créer un léger décalage entre les différents éléments comme ici :
[Texte : délais 0 – effet diapo centre]
[Etiquette : délais 20ms – effet diapo gauche]
Animation 7
Animation 8
Animation d’entrée
diapo – up
délais 0ms
Animation 8.2
Animation d’entrée
diapo – up
délais 70ms
Animation 8.3
Animation d’entrée
diapo – up
délais 140ms
Animation 9
Animation d’entrée
Plier – centre
délais 0ms
Animation 9.2
Animation d’entrée
Plier – centre
délais 70ms
Animation 9.3
Animation d’entrée
Plier – centre
délais 140ms
Animation 10 : basculer – centre
Animation 11 : Diapo gauche
Animation 12
Merci !
On finit sur cette animation un peu kitch pour le plaisir 😀
Animation 13