Qu’est-ce que c’est ?

Il s’agit d’une méthode de web design qui consiste à donner l’illusion d’un effet « 3D »  à une page web. Les éléments sont disposés en couches superposées qui se déplacent à des vitesses différentes lors d’une action de l’utilisateur, qui peut être le scroll ou le déplacement de la souris.

Les méthodes

Il est possible d’intégrer un effet parallaxe uniquement en CSS3. Il faut alors beaucoup jouer avec les propriétés transform, position : absolute et background-attachment: fixed.

 Quelques exemples :

•  https://codepen.io/keithclark/pen/JycFw
•  http://keithclark.co.uk/articles/pure-css-parallax-websites/
•  https://www.creativejuiz.fr/blog/tutoriels/css3-effet-parallaxe-sans-javascript

Cependant, l’utilisation de certaines propriétés CSS3 peut encore entraîner des problèmes de compatibilité entre les navigateurs. Le plus simple reste d’utiliser une bibliothèque jQuery prévue à cet effet dont voici une liste non exhaustive : http://www.megaptery.com/2012/08/9-plugins-jquery-effets-parallaxe.html

Nous en avons testé l’une d’elles particulièrement efficace : SUPERSCROLLORAMA - http://johnpolacek.github.io/superscrollorama/

Cette librairie propose une panoplie d’effets de scrolling, dont le parallaxe, et permet facilement leur intégration. Il suffit de se baser sur le code exemple fourni, et d’adapter le code JS dont on a besoin, aux éléments de notre site.

Les inconvénients du parallaxe

Il est évident que d’un point de vue esthétique, communication ou marketing, l’effet parallaxe, de par son côté innovant qui attire l’œil et qui suscite la curiosité, est intéressant. C’est également le cas du point de vue de l’intégrateur. 

Cependant, il faut également noter un certain nombre d’inconvénients à l’utilisation de ce type de web design :

• Dans le cas d’un site « One page », cela pose un problème de référencement car des sites web avec une seule page ne permettent qu'un seul ensemble de méta-informations, une balise h1 efficace et une URL ;
• Il peut y avoir des problèmes de performance ;
• Le parallaxe est inapplicable aux supports tablette et mobile, il faut donc prendre cela en considération lors de la création d’un site responsive.

Si vous aussi, vous souhaitez intégrer un effet parallaxe à votre site, n’hésitez pas à nous contacter pour en discuter !