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

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

4 × 2 =