L’effet parallaxe pour son site web

L’effet parallaxe pour son site web

La parallaxe est apparue dans l’univers du webdesign il y a déjà près de quatre ans, en 2010. Les webdesigners y ont vu un moyen original de marquer les esprits des internautes en donnant à leurs sites une identité graphique originale.

Mais qu’est-ce donc que l’effet parallaxe et pourquoi réunit-il autant d’adeptes ?

Cette technique sépare les éléments visuels de l’arrière-plan d’un site web afin de les faire défiler à différentes vitesses. Plusieurs techniques de parallaxe existent : le scroll de la page ou la position de la souris. Techniquement, cet effet peut se créer de plusieurs façons avec du CSS, HTML5, Javascript ou du Jquery. Il s’adapte également à tous les CMS connus du marché : WordPress, Drupal, Joomla, Prestashop… pour plus de flexibilité.

Quand un internaute scroll la page du site, il a l’impression d’un effet de profondeur. Lorsque la technique est appliquée à la souris, le décor change en fonction de la position, l’internaute crée lui-même les effets qu’il souhaite.

Voici trois exemples pour mieux visualiser cet effet :

Avec le scroll de page : http://kapsulevision.fr/ et http://socialisproject.com/

Avec la position de la souris : http://www.digitalhands.net/

Cet effet améliore considérablement l’expérience utilisateur en lui offrant une navigation plus fluide tout en mettant en relief les différents éléments du site. Le plus important est de respecter les codes primaires de l’ergonomie pour ne pas déstabiliser l’internaute et produire l’effet inverse en le faisant fuir.

La parallaxe et le responsive design

Bien que créé à la base pour les ordinateurs, la parallaxe peut désormais s’adapter à tous les supports mobiles. Cela demande en revanche beaucoup d’adaptation et de temps pour créer les différents éléments graphiques des supports. On utilise le plus souvent cet effet via le scroll vertical mais il est également possible de le mettre en place via un scroll horizontal pour plus de variété.

Et vous, que pensez-vous de l’effet parallaxe pour votre site web ?

Ecrire un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>