fbpx
/ English
parallaxe

Qu’est-ce que le parallaxe ?

Quelle est la définition de « parallaxe » ?

Le terme parallaxe (nom féminin) est utilisé dans plusieurs domaines différents, de l’astronomie, à l’optique, en passant par la psychologie, la photographie et le cinéma. Il réfère à un changement de perspective sur un objet.

Définition du dictionnaire Robert
Déplacement de la position apparente (d’un corps céleste) dû au changement de position de l’observateur ; angle qui le mesure. Angle de deux axes optiques visant un même objet.

Exemple de l'effet parallaxe en design

Qu’est-ce que l’effet parallaxe en design Web ?

En design Web, le terme parallaxe est utilisé pour désigner un effet visuel où des objets (images, blocs de textes ou de couleurs, etc.) sont déplacés à des vitesses différentes ou en sens inverse pour créer une impression de profondeur. Le mouvement des objets est produit par le défilement de la page par l’utilisateur. C’est une technique qui a été beaucoup utilisée il y a plusieurs années dans les jeux vidéo dits « de plateforme » : par exemple, dans Mario Bros, le décor se déplaçait plus lentement que le devant du tableau, créant une certaine perspective dans la télévision. C’est le même effet qui est créé dans les sites Web.

Au niveau du Web, le parallaxe est apparu avec l’arrivée du flat design et des sites Web à une seule page, vers 2010. Dans le premier cas, le style flat design faisant en sorte que les stratégies traditionnellement utilisées pour créer un effet 3D – les ombrages ou les réflexions – n’étaient plus considérées, des techniques comme le parallaxe ont été privilégiées pour créer de la profondeur. Quant aux pages Web uniques, l’effet parallaxe est parfait puisqu’elles requièrent une grande quantité de scrolling pour défiler tout le contenu. Techniquement, l’effet parallaxe peut être obtenu avec du CSS ou du JS.

L’article Tomato Can Blues de The New York Times illustre bien ce qu’il est possible de faire avec le parallaxe. Sur la page, les différentes images sont composées de plusieurs couches de personnages qui grossissent ou se déplacent lors du défilement, ce qui a pour effet d’immerger l’internaute dans le récit. L’effet est au final très réussi :

Pourquoi l’utiliser ?

Le parallaxe est un outil intéressant pour améliorer l’interactivité de votre site Web puisqu’il permet à votre client de créer un effet visuel. Ce scroll effect peut être utilisé par exemple pour mettre de l’avant un détail dans une photo, pour immerger l’internaute ou dans le but de créer un mouvement qui captera l’attention. Dans certains cas, c’est le détail qui fera la différence et contribuera à créer un site Web mémorable. C’est le cas notamment du site du jeu vidéo Firewatch, où l’effet est utilisé pour transmettre aux internautes l’atmosphère propre à cet environnement virtuel. Utilisé intelligemment, l’effet parallaxe peut être une façon efficace de vous démarquer de vos compétiteurs :

Quels sont les problèmes reliés au parallaxe ?

D’abord, les éléments utilisés pour créer l’effet peuvent avoir une incidence sur les performances de votre site Web. En effet, pour fonctionner, l’effet parallaxe est souvent composé d’éléments multiples ou de grandes tailles, donc de poids importants. Or, plus le contenu d’une page Web est volumineux, plus le temps de téléchargement est long. C’est un élément important à considérer pour créer une expérience utilisateur globale agréable pour votre client.

Un autre problème se situe au niveau des ajustements relatifs aux animations. Pour être efficace, les animations doivent se déployer correctement : un mouvement trop rapide ou trop lent fera en sorte que l’effet parallaxe ratera sa cible. Or, avec la multitude des résolutions qui existent sur les différents appareils, il est parfois difficile de faire en sorte que l’effet parallaxe soit aussi réussi sur toutes les plateformes.

Finalement, l’effet parallaxe peut souffrir de problèmes de perception de la part de vos clients. Dans un premier temps, comme les internautes sont habitués à être confrontés à une multitude de publicités animés, le parallaxe est parfois ignoré puisqu’il est associé à du contenu indésirable. Il devient donc inutile. Outre le manque de visibilité, le parallaxe peut aussi souffrir d’indifférence de la part des internautes. Dans bien des cas, ceux-ci sont à la recherche d’un contenu spécifique et ne sont pas intéressés à s’attarder à des effets décoratifs. Encore une fois, dans un tel contexte, le parallaxe rate sa cible.

Mettre du mouvement dans votre site Web

Au final, le parallaxe est une stratégie parmi d’autres pour ajouter du mouvement à votre site Web. Utilisé de manière intelligente et conceptuelle, il peut contribuer à faire mettre de l’avant l’image de marque de votre entreprise. N’hésitez pas à faire appel à nous pour discuter des différentes options pour dynamiser votre site Web.

Auteur de l'article

Émilie Demers Moreau

Designer graphique
Diplômée de l’École de Design de l’UQÀM depuis 2011, Emilie aime jouer avec formes et couleurs pour construire des images qui vous ressemblent. Son sens aiguisé de l’analyse et son œil graphique lui permettent de répondre précisément aux besoins de ses clients, que ce soit à l’imprimé, sur le web ou lors de présentations numériques. Curieuse de nature, elle est constamment à la recherche de nouvelles façons de vous faire rayonner.

À découvrir sur notre blogue

2019-04-09

Nom de domaine : comment le choisir ?

Davyd Quintal / Directeur des solutions novatrices

Le nom de domaine est l’adresse d’un site Web représentée par une série de caractères alphanumériques suivi d’un point et de quelques lettes (le TLD).

Lire la suite
2018-04-10

Comment comparer des soumissions pour la conception d’un site Web ?

Apprenez-en plus sur les critères d’évaluation pour évaluer les soumissions pour un site Web provenant d’agences spécialisées.

Lire la suite
2021-02-21

Cache : c’est quoi et est-ce que je devrais en avoir sur mon site Web ?

Davyd Quintal / Directeur des solutions novatrices

La mise en cache (ou caching) est une opération via laquelle le gestionnaire de contenu enregistre une copie de la page assemblée.

Lire la suite
2020-11-10

Erreur 404 : pourquoi créer une page personnalisée ?

Émilie Demers Moreau / Designer graphique

L’erreur 404 se produit lorsqu’une page de votre site Web est introuvable ce qui peut conduire à une expérience négative pour l’utilisateur

Lire la suite

Laisser un commentaire

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.