Etude – Effet de parallaxe

Bonjour,

Dans cet article je vais vous exposer une technique qui a été et est toujours une grande tendance dans le webdesign, l’effet parallaxe. Cet effet peut être un moyen de compléter, d’amplifier ou d’accompagner l’immersion du spectateur dans la narration ou l’univers du site. C’est une technique interactive déclenchée généralement par le scroll de la souris qui crée une impression de profondeur, de 3 dimensions. C’est avec des tailles et des vitesses de mouvement différentes qu’on réalise une impression de perspective.

Voici des exemples (ci-dessous) d’effet de parallaxe basique et très simple qui utilise des illustrations vectorielles et en 3D. Ce n’est pas grand chose et il semble que cela ne divertit pas longtemps mais la réaction fonctionne bien: cela rend le site beaucoup plus dynamique et lui donne de la valeur qualitative.

Capture d’écran du site iutopi.com

Capture d’écran du site egopop.net

Une autre utilisation du parallaxe qui se présente dans presque tous les sites actuels est de faire passer des bandes de contenu par-dessus un arrière plan qui est généralement une photographie. Il est préférable que le site soit assez long en verticalité pour donner la possibilité au spectateur de profiter de cet effet. Bien entendu, un site qui utilise trop cet effet mettra l’utilisateur en déséquilibre visuel et cela le perdra entre les différents contenus. Comme toujours, trop de quelque chose, tue ce quelque chose.

Voici (ci-dessous) des exemples de sites proposant une expérience dans les Pyrénées et une métaphore alimentaire pour un studio de création. Ces deux sites présentent un univers bien définit et dont on s’imprègne par le choix des visuels et de l’effet de parallaxe qui s’appliquent seulement à quelques éléments.

Captures d’écran du site ma-trace.com

Captures d’écran du site pesto-studio.com

Puis il y a les sites qui repoussent les limites et proposent des systèmes de parallaxe très technique et évolué, cherchant avant tout l’innovation. Cet effet permet une forme de narration, voir de chronologie dans la succession des contenus et offre des transitions naturelles entre les images. Accompagner l’effet de parallaxe avec de l’animation est le meilleur moyen de renforcer la qualité et le dynamisme du site pour accentuer les mouvements de transitions ou le message cognitif d’une image.

Captures d’écran du site maria-callas.com/fr

Captures d’écran du site adidas.fr/speedfactory

Dans ces exemples de site (ci-dessus), nous avons une immersion complète avec le son, l’image et l’atmosphère très forte du site présentant la célèbre chanteuse d’opéra Maria Callas, ainsi qu’un voyage à travers la basket Adidas et le professionnalisme de la marque. Ces deux sites utilisent un parallaxe de texte passant sur les images en plus d’un background qui se développe au fur et à mesure de la descente. Le site d’Adidas en particulier a utilisé beaucoup d’interactivité avec les images animées, les vidéos, la possibilité de faire un 360° de la chaussure en plus du parallaxe au scroll ce qui rend la page longue à charger et difficile à maîtriser. Le site de Maria Callas présente différentes techniques mais organisées par les différents chapitres du menu. Nous avons de la 3D en vidéo, des vidéos en illustration, une chronologie en parallax scrolling mais tout ne se présent pas en même temps dans la même page mais sur plusieurs pages, ce qui permet une bonne différenciation et une preuve d’un design innovant et de grande qualité.

 

Sources: Wix-Webdesign / Wix-Galerie / Awwwards

Laisser un commentaire

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