L’effet parallaxe – des erreurs à éviter à travers 6 sites web.
21 mars 2019Les sites web dynamiques sont monnaie courante de nos jours. Ils utilisent pour cela différents stratagèmes.
Ici, je vais vous référencer 6 sites qui utilisent l’effet parallaxe. Qu’est-ce donc que cela ? me demandez-vous (et oui je lis dans vos pensées). Et bien c’est très simple (malgré son nom compliqué) ! Cela désigne un déplacement de plusieurs couches d’éléments (images) superposées donnant un effet de profondeur et/ou de dynamisme. C’est un peu comme pour le cinéma en 3D. Cela peut être dû au scroll ou tous simplement au positionnement (coordonnées) de la souris sur l’image.
Grâce à ces 6 exemples concrets, je vais vous montrer des idées d’applications, mais aussi des choses à éviter de reproduire !
2 sites qui utilisent le scrolling
On remarque aisément ici le changement d’image en fonction de notre position sur la page. Les images défilent sans fausse note. Le seul bémol est parfois la difficulté de lire le texte suivant le contraste de l’image de fond.
Un autre effet intéressant est réalisé sur ce site. Il pratiquer un zoom de l’image lorsque l’on descend la page.
Ce n’est qu’une question de goût, mais je trouve que la dernière partie de la page est terne par rapport à la charte graphique générale. Cela manque de couleur. Pourquoi pas du vert :/ apparaissant petit à petit avec le scroll de la souris ?
2 sites qui utilisent le positionnement de la souris
J’ai remarqué qu’il existe très peu de site utilisant seulement les mouvements des images suivants les coordonnées de la souris. J’ai donc décidé de vous livrer deux sites qui ont comme bannière d’accueil ce type de parallaxe. Le reste étant composé de scrolling tels que l’on en a vu précédemment.
On pourrait croire qu’il est difficile d’allier une palette de couleurs aussi variés avec l’élégance. Et bien, c’est ce qu’à pourtant fait culturalsolutions.co.uk.
Il y a cependant un souci. Voyez l’image ci-dessous… Des espaces… on passe la moitié du scroll dans le vide… Est-ce pour montrer la belle parallaxe d’arrière plan ?
Très connu en exemple de parallaxe, je ne pouvais pas ne pas vous présenter ce site en One Page.
Toujours de mon point de vue, ce site a tout de même un petit défaut, mais ce n’est pas au niveau de la parallaxe, bien que cette technique aurait pu être utilisée pour l’éviter.
Je m’explique, sur l’onglet Referanslarımız, les informations apparaissent que lorsque la souris les sollicitent. Pour moi, une bonne technique aurait été de les griser et de rajouter de la couleur et un mini-zoom au passage de la souris.
Pour utiliser la technique de la parallaxe, au scroll, les informations auraient pu apparaitre petit à petit.
Le but était peut-être de mettre en évidence les trois cercles qui se maintiennent quoi qu’il arrive ? Ou peut-être est-ce un problème du site qui sera résolu prochainement ?
2 sites qui utilisent les deux
Une agence de webdesign doit montrer son potentiel à travers son site. C’est ce que fait unfold.no.
Par contre, de mon point de vue, je trouve parfois les espaces excessifs comme on peut le voir sur l’image suivante. C’est le même problème que pour précédemment avec le site culturalsolutions.co.uk, mais en moins marqués.
L’effet parallaxe est très présent sur ce site. Il utilise le scrolling et aussi les coordonnées de la souris. Le site est très bien présenté. Je n’ai rien à redire, c’est un bon exemple de chose à faire.
Conclusion
Nous avons remarqué que créer un effet parallaxe méritait réflexion.Il y a des bonnes et des mauvaises choses à réaliser. Alors tâcher de ne pas en abuser ;).
Les idées à garder
- Ajouter plusieurs images dynamiques sur la même page
- L’effet zoom au scrolling de la page
- Modifier des éléments ou les faire bouger selon les mouvements de la souris
Les choses à éviter
- Que cela joue sur la difficulté de lecture
- Les grands espaces entre les paragraphes
On a aussi vu que cet effet parallaxe aurait pu éviter certains problèmes, comme des couleurs ternes ou des cercles blancs.
