Effet de parallaxe: dynamiser un site web

Web

juin 15, 2018

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, « parallaxe » qualifie le déplacement d’un objet observé depuis deux lignes de vue différentes. 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. En quoi l’effet de parallaxe peut nous servir pour un site web ? C’est ce que nous allons découvrir.

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. 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. Il est 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).

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.

DigitalHands
DigitalHands a choisi l’effet parallaxe afin de créer une image animée.

Rédigé par Shu-Min HUANG, traduit de l’anglais par Célia Casarramona

Sources