Partie 3 : Interaction et animation, du dynamisme pour votre site internet

Eva Monico

L’animation et l'interaction par les langages web : 

Les animations et interactions sur le web sont réalisées grâce à différents langages : les transitions et animations en CSS, le langage Flash et le Javascript

Javascript, kézako ? C’est un langage de programmation orienté objets (appelé aussi JS). C’est un poids lourd du web créé dans les années 90, démocratisé sur internet mais aussi sur le mobile pour la création d’applications et de logiciels.
En pratique le JS sur les sites internet octroie interactivité et dynamisme aux pages web. Le JS rajoute des fonctionnalités au web, en améliorant l’expérience utilisateur. 

Un site internet se doit aujourd’hui d’être dynamique. C’est un média qui donne une liberté d’interaction avec l’utilisateur. Voici une liste non-exhaustive d’interactions possibles grâce aux différents langages d’animation : 

  • l’apparition d’information lors du scroll de l’internaute,
  • l’apparition ou la disparition d’un contenu grâce au clic de la souris 
  • des effets de parallaxe pour donner de la profondeur au contenu 
  • les transitions de pages animées (apparition, slider…)
  • des boutons ou call to action animés lors du passage de la souris 
  • de l’animation en webGL pour améliorer l’interactivité 

L’interactivité et l’animation sur un site internet est essentiel pour capter l’attention de l’utilisateur. L’imagination du webdesigner est sa seule limite pour penser des animations ergonomiques et esthétiques pour mettre en avant des informations. 

L'effet de Parallaxe, fluidité et animation : 

L’effet de parallaxe est l’incidence du changement de position de l’observateur sur l’observation d’un objet. Sur le web,  cet effet correspond au déplacement de plusieurs éléments sur différents calques, à différentes vitesses pour donner une impression de 3D. La parallaxe agit grâce au scroll ou aux coordonnées de la souris, qui affectera les positions des différents éléments et qui générera alors un effet de profondeur. C’est grâce à l’utilisation de javascript qu’il sera possible pour le webdesigner de déplacer les éléments par rapport à la position de la souris ou du scroll. 

Alors, pourquoi et quand utiliser l'effet de parallaxe ? Tout d’abord, il donne de la dynamique à un site internet et plonge l’utilisateur dans un univers impressionnant. Par son effet animé, il permet de créer une véritable narration

L'effet de parallaxe est alors régulièrement utilisé pour capter l’utilisateur et lui raconter une histoire. Pour la majorité des sites internet, il doit être utilisé avec parcimonie, pour un header de page par exemple, ou pour présenter un nouveau produit. Pourtant, il existe aussi des sites entièrement réalisés avec des effets de parallaxe, mais avec comme but premier, la narration et l’univers de marque. La parallaxe à vocation artistique trouvera sa juste place sur des sites internet culturels, narratifs ou innovants. 

Exemples d'animation et d'effet de parallaxe :