Dites-nous tout...

On vous rappelle dans l’heure

scrolling parallaxe header

Furax parallaxe !

Véritable tendance depuis 2013, le scrolling parallaxe est pourtant très souvent l’archétype de la fausse bonne idée. Pages lentes, non navigables, incompatibles, illisibles, confuses pour les visiteurs ; coûteuses, difficile à maintenir et non évolutives pour les webmasters… les écueils sont nombreux. Les sites qui parviennent à tirer parti de cet art difficile sont finalement assez rares. Passage en revue.

Le scrolling parallaxe de base

Ce site offre un module de création d'effet de parallaxe. Rien de tel pour promouvoir le module que de le mettre en scène...

 

On a là un effet typique de parallaxe entre les photos de fond et du texte au premier plan. Bien que les photos soient plutôt mignonnes, rien de très créatif ici. On est sur un site de technicien, la parallaxe se résume à sa plus simple expression artistique. On ressent même plutôt une sorte de déception en découvrant qu'il n'y a pas de parallaxe à l'intérieur des photos retouchées pour créer un effet Bokeh artificiel.

Le précurseur du genre

La légende. A la fois précurseur et chef d'oeuvre technico-artistique. Sorti début 2014, je ne connais pas de site ayant poussé le concept du scrolling parallaxe aussi loin. Comment ne pas avoir envie de le décliner ça sur son propre site ? Pensons juste aux centaines d’heure que cette page a du nécessiter: 3D, vidéo, html 5, réglages millimétriques.

Le site est encore en ligne (pour combien de temps ?) et a été mis à jour en 2015. Il a maintenant pris quelques rides, certains liens ne fonctionnent plus et le code html est devenu obsolète. Des bugs apparaissent ça et là. Ci contre, pour la postérité, une vidéo du site d'origine.

 

La prouesse technique et artistique reste toutefois évidente. Tellement même, que l'on se demande l’intérêt d'une telle expérience par rapport à une vidéo, dont l'expérience s'en rapprocherait du coup assez fortement. Si l'on fait le bilan, on a quand même une page qui pèse plus de 52 Mo, une animation saccadée et une expérience qui ne fonctionne pas bien sur mobile...

parallaxe ne pas faire

Le scrolling parallaxe overkill

85 Mo !

 

C'est le poids que faisait cette page avant de disparaître du web et que la marque ne la remplace par de bonnes vieilles vidéos.

 

Cette page a tout de même marqué les esprits par sa direction artistique de haut vol... qui récompensait l'attente du chargement d'au moins 2 minutes.

 

Est-ce que cette réalisation a atteint son but, c'est à dire promouvoir le produit ? La réponse est oui, mais parce qu'on était en avril 2013 et que c'était du jamais vu. D'un autre coté le buzz a probablement plus marqué les agences de com' que les pilotes de motocross...

L'expérience artistique interactive

Les goûts et les couleurs...

 

Personnellement, j'ai beaucoup de mal avec l'esthétique de ce site. Est-ce que l'auteur cultive le mauvais goût ? Est-il un amateur fini ? Ou est-ce ma formation d'ingénieur qui m'a privé à jamais de toute sensibilité artistique ?

 

Quoi qu'il en soit le site présente un certain intérêt : ici le scrolling est le point d'appuis de l'expérience artistique proposée au visiteur. Une vidéo réalisée avec les mêmes contenus ne pourrait jamais procurer le même feeling. On peut donc dire que l'utilisation de scrolling parallaxe (et autres effets de scrolling : animation, apparitions, disparitions) est particulièrement justifiée ici.

experience interactive

Le scrolling vertical inversé

Vous connaissez le scrolling vers le haut ?

 

Moi non plus... du moins jusqu'à découvrir le site de la tour Space Needle de Seattle. Mais finalement, quoi de plus logique pour un gratte ciel ? C'est un peu déroutant dans la seconde où l'on arrive sur le site, mais une fois que l'on a compris on se dit que ça ne pouvait pas être fait autrement.

On ne peut donc pas dire que le scrolling parallaxe soit injustifié pour ce site. Non, ce qui gène dans ce site c'est la réalisation. On passe en effet d'un début d'expérience très chargé avec des transitions en parallaxe dans tous les sens à un loooong scrolling vers la haut (vers l'espace donc) où il ne se passe plus rien. Avec un peu de patience et une bonne séance de musculation d'index sur la roulette de la souris, on parvient finalement au bout... pour découvrir un morceau de Lune ou de Mars, je ne sais pas.... et rien. Pas une petite blague, pas un lien, pas un call to action, rien. Frustrant.

 

C'est en revenant sur le site que j'ai réalisé qu'il y avait un peu plus à y faire qu'à scroller frénétiquement. Au fur-et-à mesure de l'ascension, se dévoilent en fait de multiples petites zones interactives qui permettent de découvrir des points d’intérêt dans le panorama de la ville. C'est nettement plus intéressant.

 

On est en fait là sur un piège des pages à scrolling : pris par le jeu du scroll et du désir de découvrir ce qui vient ensuite, on ne prend pas le temps de regarder ou de lire le contenu.

 

[09/2018] Màj : Depuis Août 2018 le site a été remanié et le scrolling vers le haut a disparu.

Le scrolling horizontal

Cette fois, on scrolle horizontalement. Ce site d'agence web propose une réalisation d'une grande finesse. On est d'emblée accueilli par un loader rapide et sympa, puis la page présente le savoir faire de l'agence au travers de quelques cas qui s’enchaînent dans une parallaxe fluide et bien dosée. Les photos sont de très grande qualité et les autres contenus jouent avec les effets de flou et de transparence à la perfection.

 

Cerise sur le gâteau, la durée de l'expérience est idéale, ni frustrant ni trop long, elle s'achève au bon moment. Il aurait même été possible d'y ajouter un call to action pour parfaire le tout.

 

Sur mobile, on constate des petites difficultés dans la navigation et quelques ratés dans la transparence de certains éléments. Preuve est faite que même avec beaucoup de soin, il est très difficile de réaliser un scrolling parallaxe responsive impeccable.

Le scrolling parallaxe adaptatif

Une page de freelance simple mais très soignée.

 

La mise en page a été méticuleusement étudiée avec une grande maîtrise de l'espace, des volumes et du vide. Sur desktop, certaines zones dévoilent avec parcimonie leur contenu en défilement parallaxe pour attiser l’intérêt. Sur mobile, la parallaxe disparaît et les contenus s’enchaînent dans un scroll classique. Bel exemple de design adaptatif.

 

Du point de vue technique, je n'ai constaté aucun problème. Que ce soit sur desktop ou sur mobile. Même dans la présentation des travaux réalisés qui se font dans des sous zones dévoilées en accordéon.

 

Ce site one-page est une référence de justesse et d'équilibre par rapport au sujet traité :

  • équilibre entre ambition artistique et risque technique
  • équilibre entre ambition artistique et contenu  : aucun des deux n'éclipse l'autre
  • équilibre entre ambition artistique et moyens budgétaires (ou de temps) de l'auteur

La web story interactive

Grosse ambition, résultat mitigé.

 

Peugeot nous offre un support original pour promouvoir son véhicule hybride : une web story. On est immédiatement plongé dans l'univers de l'histoire grâce aux 1ères illustrations de qualité, mais on en ressort dès les premières secondes à cause du rythme qui ne fonctionne pas : l'ambiance sonore est molle et détachée de l'action, l’enchaînement au scroll est pénible.

 

Sur mobile, après un chargement vraiment trop long, on découvre des plans qui se chevauchent et une mise en page détraquée. Ca n'a clairement pas été prévu pour.

 

Au bilan on a une nouvelle démonstration que le scrolling parallaxe est parfois une fausse bonne idée, même quand on a les moyens d'une grande marque.

La parallaxe en zoom

Un site d'aventurier... avec de l'envergure ! Waouh !

Ce zoom à l'accueil est terriblement efficace. Je ne me lasse pas de le repasser.

 

Une belle démonstration de parfaite utilisation de la parallaxe. L'effet est bref mais procure une véritable sensation. Avec quelques plans et une bonne maîtrise de la perspective, il est vraiment possible de faire des choses terribles !

 

Le reste du site est classique mais très solide. Un piédestal pour Bear Grylls (Man vs Wild).