Zoom sur l’Effet Parallaxe

On vous propose aujourd’hui de découvrir une des nouvelles tendances web, l’effet parallaxe, et son intérêt pour votre site internet.

Le parallaxe : de quoi s’agit-il exactement ?

Tout d’abord, il vous faut voir que le terme est utilisé dans plusieurs domaines. La parallaxe désigne en astronomie une technique de calcul de la distance entre des éléments. Par exemple, la parallaxe solaire permet de définir la distance Terre-Soleil.

Pour les utilisateurs d’iOS 7, cet effet est également présent sur l’écran d’accueil, à l’inclinaison de l’appareil. Cela apporte une profondeur et se rapproche d’un effet de 3D.

En web, il s’agit de l’animation d’une ou plusieurs parties de la page par la superposition d’éléments (images ou texte) se déplaçant à des vitesses différentes et/ou sur des axes différents. Lors d’une interaction du visiteur avec la page, scroll ou mouvement de la souris par exemple, cela va provoquer des déplacements d’éléments, créant ainsi un effet de profondeur sur la page. Sur d’autres supports, tels que les smartphones ou tablettes, l’animation se fait également au scroll mais aussi à l’inclinaison de l’appareil.

Schéma pour un effet parallaxe sur un scroll

Dans ce premier cas, lorsque le visiteur monte ou descends sur la page, l’élément b suit le mouvement de l’ensemble de la page, à la vitesse désirée par le visiteur. L’élément a, quant à lui, se déplacera un peu moins vite que b et finira même par disparaître du champ de vision du visiteur.

Schéma pour un effet parallaxe sur le mouvement de la souris

Certaines pages s’animent quant à elles, au mouvement de la souris. Cet effet est interprété sur les supports n’utilisant pas de souris, comme les smartphones ou les tablettes, lors de l’inclinaison de l’appareil. Dans ce cas, l’effet parallaxe créé une sensation de relief, de 3D, créé par le visiteur lui même.

En plus d’un effet de profondeur, la page réagira à l’action du visiteur et l’incitera ainsi à continuer sa navigation et à découvrir l’information de façon ludique et dynamique. Cet effet graphique permettra d’ajouter un aspect original à votre site. En fonction de l’effet recherché, il mettra en avant un ou plusieurs éléments, avec l’effet de profondeur et/ou d’animation et permettra de dynamiser votre site au premier coup d’œil !

Triotech aime ce nouveau procédé basé sur le javascript ou/et le CSS, d’ailleurs nous utilisons déjà cet effet avec quelques clients avec des projets tels que Les Vergers de Saint Jean, Les Vacances de Félix ou encore O’Cbon. Rendez-vous prochainement pour découvrir une de nos dernières créations web originale, et vous faire la démonstration par l’image !