L’effet de parallaxe, ou comment dynamiser votre site web

Rédigé par Shu-Min HUANG, traduit de l’anglais par Célia Casarramona
En astronomie, le terme « parallaxe » fait référence à l’impact du changement de position de l’observateur, lors de l’observation d’un objet, par rapport à sa position d’origine. En d’autres termes, le phénomène de « parallaxe » qualifie le déplacement d’un objet observé depuis deux lignes de vue différentes. L’image ci-dessous vous présente cet effet. Du fait de la position différente de la Terre, on pourrait croire que la même étoile apparaît à différents endroits dans le ciel, en juin et en décembre.
l'effet parallax astronomie

Les sites web à effet de parallaxe

Depuis 2017, certaines plateformes de design font remarquer que, bien qu’il ne s’agisse pas d’un nouveau phénomène, les animations sont toujours au goût du jour et que leur utilisation n’a fait que croître dans le domaine du webdesign. En effet, le but est désormais d’impliquer les visiteurs et de les faire activement participer, lorsqu’ils consultent un site web. Pour les propriétaires du site web, l’objectif n’est pas seulement d’attirer l’attention des visiteurs, mais aussi de leur donner envie de rester plus longtemps sur les pages du site.
Parmi ces effets graphiques interactifs, on compte notamment l’effet de parallaxe, facile à comprendre et à développer sur votre site web. Le principe de base exige la présence de différents éléments qui permettront de simuler différents plans. Ces plans sont destinés à bouger dans le même sens, mais à des vitesses différentes, pour donner l’impression que certains sont au premier plan (éléments se déplaçant par mouvement rapide) alors que d’autres auront l’air de figurer en arrière-plan (éléments se déplaçant plus lentement), ce qu’illustre l’image suivante :
l'effet de parallaxe exemple
Dans la pratique, on trouve très facilement des tutoriels en ligne pour réaliser des effets de parallaxe, comme par exemple Pure-CSS Parallax Scrolling Effect ou Simple parallax scrolling tutorial.

Quelques exemples de sites en parallaxe

Ces exemples donnent déjà une bonne idée du potentiel et de l’aspect attractif de l’effet parallaxe.
A-dam
La marque A-dam utilise un effet de parallaxe pour mettre en valeur les sous-vêtements qu’elle commercialise.
l'effet parallaxe sur un site web
Alquimia WRG
Alquimia WRG a eu recours à des éléments de parallaxe pour simuler un environnement 3D sur son site web.
effet parallaxe 3D
DigitalHands
DigitalHands a choisi l’effet parallaxe afin de créer une image animée.
l'effet parallaxe site web
 
Sources

Laisser un commentaire

Bouton retour vers haut de page