L’effet parallaxe – des erreurs à éviter à travers 6 sites web.

L’effet parallaxe – des erreurs à éviter à travers 6 sites web.

21 mars 2019 0 Par Miss Dev

Les 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.

ma-trace - site - scrolling parallax
Ici, on distingue bien la difficulté de lire la partie écrite en rouge.

Un autre effet intéressant est réalisé sur ce site. Il pratiquer un zoom de l’image lorsque l’on descend la page.

pesto-studio- site parallax - effet zoom
Au scroll de la souris, un effet zoom apparaît.

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 ?

pesto-studio- site parallax - couleurs ternes
Listes des logos clients du site.

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.

culturalsolutions.co.uk site - effet parallax - scroll et souris
Dans le fond, des cercles se déplaçant au gré de la souris.

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.

digital hands site - effet parallaxe- move souris
Les légendes se déplacent en fonction de la souris.

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 ?

digital hands site - effet parallaxe- blanc
Les informations apparaissent que lorsque la souris est sur un des cercles (sauf pour trois d'entre eux).

2 sites qui utilisent les deux

Une agence de webdesign doit montrer son potentiel à travers son site. C’est ce que fait unfold.no.

unfold.no site - effet parallax - souris et scroll
Au déplacement de la souris, l'image arrière change, de même lorsque l'on descend la page.

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.

unfold.no site - effet parallax - gros espace

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.

beckett.de mouvement souris
Hormis le scrolling de la page, sur cette partie on peut également "jouer" avec le déplacement des flocons de neiges.

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.