Est-ce la mode des sites en parallax scrolling vertical ?

Connaissez-vous le parallax scrolling ? Si vous n’avez pas eu la chance de posséder une console 8-bits alors il y a peu de chances pour que vous connaissiez cette technique graphique permettant de donner une illusion de profondeur de champ (mais il n’est pas trop tard, car il vous reste encore quelques jours pour aller à l’expo Game Story).

Parallax_scrolling_ex

Pourquoi parler du parallax scrolling ? Par ce que j’ai comme l’impression que cette technique est remise au gout du jour sur un certain nombre de mini-sites : Parallax Scrolling Inspiration. Comme précisé plus haut, tout l’intérêt est de donner une signature graphique particulière à un site pour que les visiteurs s’en souviennent. De plus, utilisée de façon intelligente, le parallax scrolling permet de scénariser l’apparition d’éléments sur la page, lui conférant ainsi une cinématique sans pour autant avoir recours à Flash. Le site Ben the Bodyguard a ainsi été le premier à l’exploiter en le combinant à un défilement vertical, le tout dans univers de BD.

Ben

De nombreux designers s’en servent maintenant pour leur portfolio, de même que des grandes marques qui en ont vu l’intérêt :

  • Nike sur le mini-site de son organisation Better World ;Nike
  • Smart sur son site américain SmartUSA ;Smart
  •  VW sur le site de sa nouvelle Beetle ;Beetle
  •  Citroën sur le site de la DS5.DS5

Je ne saurais vous dire pourquoi trois constructeurs automobiles ont utilisé cette technique de défilement vertical en quelque mois, toujours est-il que la communauté apprécie. Il n’y a pas de raison particulière pour mettre en oeuvre le parallax scrolling si ce n’est vouloir différencier son site et proposer une expérience graphique originale.

Puisque l’on parle d’originalité, je vous propose de découvrir deux derniers sites qui poussent encore plus loin cette technique :

  • Nintendo avec un mini site pour Mario Kart qui utilise du scrolling vertical et horizontal ;Mario
  • L’office du tourisme de Nouvelle-Zélande qui incorpore toute une série de modules interactifs.NewZealand

Est-ce que le parallax scrolling va devenir la norme ? Non, aucune chance. D’une part car il c’est une technique complexe à coder qu n’est pas forcément compatible avec les systèmes de gestion de contenu (pas pratique pour les sites multilingues), d’autre part car cela rallonge les temps d’affichage de la page (il faut charger tous les éléments graphiques et contenus). Mais le plus important est qu’en adoptant un défilement horizontal, vous cassez le principe de navigation page à page. Dans l’absolu, ce n’est pas très grave (Vive les sites web à page unique !), mais un défilement horizontal combiné avec un bandeau de navigation horizontal qui vous suit tout au long de la page peut en dérouter plus d’un. Bref, à utiliser avec précaution.

6 réflexions sur “Est-ce la mode des sites en parallax scrolling vertical ?

  1. Bonjour à tous, ce procédé est intéressant pour un mini-site événementiel mais en effet pas forcement pour l’ensemble du site (ergonomie particulière et manquement de fond /contenu du fait d’un choix plutôt visuel). Pour marquer le coup sur certaines rubriques (hors CMS) nous pensons que c’est un bel outil (de plus) mais à utiliser avec précaution. Pour ce qui est de la mode, nous remarquons que la plupart des « sites du jour » (TheFWA) sélectionnés depuis 6 mois utilise le parallax comme procédé d’animation/interaction (pas forcement scrolling), … un signe surement ,-)
    Pour finir, on en profite pour vous souhaitez nos vœux en scrolling parallax !
    http://bit.ly/vOMf2A

    J'aime

  2. Très bien expliqué. La parallaxe est en effet à utiliser avec précaution. Elle ne doit pas entrainer des contraintes pour l’utilisateur en terme d’ergonomie mais, au contraire, faciliter la navigation. Le site de Mario Kart est super je trouve.

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s