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

Principe de fonctionnement du parallax scrolling

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.

Le site à défilement vertical Ben the Bodyguard

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 ;

    Le site de Nike en parallax scrolling
  • Smart sur son site américain SmartUSA ;

    Le site de Smart en parallax scrolling
  •  VW sur le site de sa nouvelle Beetle ;

    Le site de VW en parallax scrolling
  •  Citroën sur le site de la DS5.

    Le site de Citroën en parallax scrolling

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 ;

    Le site de Nintendo qui utilise le parallax scrolling
  • L’office du tourisme de Nouvelle-Zélande qui incorpore toute une série de modules interactifs.

    Le site de l'office du tourisme de Nouvelle-Zélande qui utilise le parallax scrolling

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 commentaires pour “Est-ce la mode des sites en parallax scrolling vertical ?”

  1. Posté par bruno alazard a dit : le

    extrèmement interessant, comme d’habitude…je n’avais jamais entendu parlé, ni vu de tels sites avant cet article…

  2. Posté par Benoît a dit : le

    Le geek qui sommeille en moi me murmure que le parallax scrolling est plutôt l’apanage des consoles 16bits.

    Le plugin jQuery spriterly est dédié à cette technique : http://spritely.net/gallery/

  3. Posté par Regis le Guennec a dit : le

    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

  4. Posté par Baron a dit : le

    Très intéressant!!!
    Je viens de découvrir, maintenant je me demande si l’approche est assez aisée.

  5. Posté par Ludo a dit : le

    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.

  6. Posté par damiuk a dit : le

    Voici un nouveau site qui vient de sortir pour les boissons In/fusion avec de très belles illustrations. http://www.infusion-company.com/