Qu’est ce qu’un thème parallax?

On entends depuis déjà un certain temps parler des thèmes Parallax, effets Parallax, techniques de Parallax Scrolling… mais qu’est-ce donc que cela??

Le premier buzz autour de cette technologie est apparu avec le site de nikebetterworld.com l’année dernière.La principale particularité de ce site Web est une navigation verticale, en scrolling, avec des effets de textes ou d’images montant ou descendant selon la section du site. On ne se contente donc pas ici d’un bête cliquer pour ouvrir une nouvelle page mais d’un pré-chargement d’une partie du contenu, permettant ainsi une navigation fluide.

Le terme Parallax corresponds au déplacement de plusieurs éléments sur des couches (calques ou layers), à des vitesses différentes. Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Le principe concerne donc au minimum deux éléments et peut être appliqué à plusieurs endroits : sur les images de fond, sur un en-tête ou un pied de page, sur des images ou encore même des vidéos avec du HTML5.

Cette technique repose sur du javascript que l’on va utiliser pour déplacer les éléments par rapport à la position de la souris ou du niveau de défilement (scroll).

Le principal désavantage de ce système est que les navigateurs internet vont généralement afficher de façon différente les animations prévues. Amusez vous par exemple à aller sur ce site avec trois navigateurs différents comme Internet explorer, Firefox et Chrome. Autre désavantage, le temps de chargement de départ qui peut être long lorsque beaucoup d’images sont utilisées.

Quelques exemples de sites Web: