Qu’est-ce que le dé­fi­le­ment parallaxe ?

Le parallax scrolling est un principe de con­cep­tion des tech­no­lo­gies d’animation qui utilise les effets de la per­cep­tion. L’objectif est de trans­mettre une pro­fon­deur spatiale avec des moyens de re­pré­sen­ta­tion bi­di­men­sion­nelle. Afin de se rap­pro­cher d’une ex­pli­ca­tion du terme, il est utile de s’in­té­res­ser à son origine.

La vidéo suivante témoigne de ce phénomène :

La campagne pu­bli­ci­taire de la marque de sport a marqué les débuts d’une tendance du Web design qui utilise l’effet parallaxe pour créer une im­pres­sion de pro­fon­deur.

Comme pour les jeux à dé­fi­le­ment latéral, les sites Web pa­ral­laxes utilisent également des méthodes dites de su­per­po­si­tion : le point de départ est un site Web d’une seule page dont les éléments de con­cep­tion sont disposés sur dif­fé­rents niveaux et peuvent être déplacés in­dé­pen­dam­ment les uns des autres de manière ho­ri­zon­tale ou verticale.

Afin de créer une per­cep­tion de pro­fon­deur induite par le mouvement, le visiteur du site Web est amené à utiliser la fonction de dé­fi­le­ment. Le mouvement et la vitesse de dé­fi­le­ment ne sont donc pas pré­dé­ter­mi­nés, mais sont contrôlés par le spec­ta­teur via la molette de la souris ou la barre de dé­fi­le­ment. Les éléments des couches avant de l’écran glissent plus ra­pi­de­ment que les éléments des couches d’arrière-plan. Ainsi, on a l’im­pres­sion d’avoir un espace tri­di­men­sion­nel.

Dans quelques cas, les sites pa­ral­laxes offrent également une fonction de dé­fi­le­ment au­to­ma­tique, ce qui évite aux uti­li­sa­teurs d’avoir à faire défiler ma­nuel­le­ment la page. Afin d’obtenir un effet d’immersion plus fort, certains dé­ve­lop­peurs com­plè­tent le dé­fi­le­ment parallaxe avec des effets sonores et vidéo qui sont di­rec­te­ment accordés à la barre de dé­fi­le­ment (c’est-à-dire la position du spec­ta­teur sur le site web).

Pour une meilleure per­cep­tion de la pro­fon­deur, les sites Web à dé­fi­le­ment parallaxe plus complexes utilisent gé­né­ra­le­ment le langage de script Ja­vaS­cript ou le framework Ja­vaS­cript jQuery. Ces derniers four­nis­sent diverses fonctions avec les­quelles vous pouvez dé­ter­mi­ner exac­te­ment comment les dif­fé­rents niveaux du site doivent se comporter pendant le processus de dé­fi­le­ment. Les effets de scrolling basés sur Ja­vaS­cript n’ont pas besoin d’être pro­gram­més à partir de zéro. Sur le Web, il existe divers logiciels qui proposent des effets pa­ral­laxes et autres ani­ma­tions sous forme de plugins faciles à intégrer. Parmi les projets les plus connus de ce type, on trouve Su­perS­crol­lo­rama, Scroll­Ma­gic et skrollr.

• Su­perS­crol­lo­rama de John Polacek : le plugin jQuery Su­pers­crol­lo­rama est basé sur la Greensock Animation Platform (GSAP). Il a été conçu par John Polacek en col­la­bo­ra­tion avec Jan Paepke. Le plugin offre diverses options d’animation pour les éléments de site Web et a longtemps été considéré comme la solution standard pour la con­cep­tion de site dépendant de la barre de dé­fi­le­ment. Su­perS­crol­lo­rama intègre la barre de dé­fi­le­ment comme une sorte de barre de pro­gres­sion sur laquelle sont disposées les ani­ma­tions sou­hai­tées. Lorsque l’in­ter­naute atteint un point défini en faisant défiler sa souris vers le bas, l’effet déterminé à ce point est déclenché. Le plugin est toujours dis­po­nible en té­lé­char­ge­ment, mais n’est plus mis à jour. En effet, les fa­bri­cants se con­centrent plutôt sur leur projet suivant : Scroll­Ma­gic. Su­perS­crol­lo­rama est sous licence MIT et GPL.
   
• Scroll­Ma­gic de Jan Paepke : Scroll­Ma­gic est une révision complète du plugin jQuery Su­perS­crol­lo­rama. Ainsi, il est basé sur jQuery et la pla­te­forme d’animation Greensock (GSAP). Cependant, ils ne font pas partie du cœur du logiciel, mais sont fournis sé­pa­ré­ment. Comme al­ter­na­tive à la GSAP, on peut utiliser pour les ani­ma­tions Velocity.js. Scroll­Ma­gic comprend tous les effets d’animation pour la barre de dé­fi­le­ment de son pré­dé­ces­seur et étend son spectre de fonctions avec des per­for­mances amé­lio­rées, la prise en charge des con­cep­tions res­pon­sives adaptées aux appareils mobiles ainsi qu’une pro­gram­ma­tion orientée objet. En plus de plusieurs effets de dé­fi­le­ment pa­ral­laxes, Scroll­Ma­gic offre une fonction de dé­fi­le­ment infini qui charge le contenu des pages Web dans une boucle infinie via Ajax. Comme son pré­dé­ces­seur, Scroll­Ma­gic est sous double licence (licence MIT et GPL).
   
• skrollr d’Alexander Prinzhorn : skrollr utilise également la barre de dé­fi­le­ment comme point de départ pour ses effets d’animation. Le plugin léger ne comprend que des bi­blio­thèques Ja­vaS­cript et CSS et fonc­tionne sans jQuery (Vanilla JS). Aucune con­nais­sance des langages de script n’est requise pour l’ap­pli­ca­tion ; seule une ex­pé­rience avec CSS3 et HTML5 est né­ces­saire. skrollr convient aux sites Web de bureau et prend en charge les na­vi­ga­teurs Web mobiles Android et iOS. A noter toutefois, le dé­ve­lop­pe­ment du projet n’a pas été réel­le­ment poursuivi depuis 2014. La prise en charge des nouveaux na­vi­ga­teurs Web n’est donc pas garantie. Le logiciel est dis­po­nible en té­lé­char­ge­ment sous licence MIT.

Le site Web a été conçu en col­la­bo­ra­tion avec des étudiants en design de l’Uni­ver­sité du Dakota du Sud et la youth art com­pe­ti­tion Humans in Space Art. En plus des tech­no­lo­gies Web de base HTML5, CSS3 et Ja­vaS­cript, les bi­blio­thèques Modernizr, LESS, Bootstrap, Require, jQuery, Signals, Sound­Ma­na­ger2 et le Greensock Tweening Engine ont été utilisés. L’effet de scrolling parallax est basé sur le plugin jQuery stellar.js de Mark Dalgleish. Le code source du site est dis­po­nible sur GitHub sous licence MIT. Le projet a remporté dif­fé­rents prix ré­com­pen­sant les con­cep­tions créatives et in­no­vantes comme celui de la FWA, Awwwards.com et CSS­De­sig­nA­wards.com.

Vous pourrez trouver des tutoriels et exemples de code qui montre pas à pas comment il est possible de mettre en place un tel design. CodePen.io explique par exemple très clai­re­ment les façons de créer le parallaxe de Firewatch.

Le site Web d’une page sert de publicité pour un tutoriel qui présente (après ins­crip­tion sur iha­te­to­ma­toes.net) les bases du plugin d’animation Scroll­Ma­gic. Sur le site, les visiteurs peuvent voir une Game Boy sur fond gris. Si vous faites défiler vers le bas, la console se déplace au premier plan et met en scène le jeu culte Tetris. Toutefois, vous ne pouvez pas jouer réel­le­ment, vous devez user encore et toujours de la mollette de la souris pour que les blocs s’alignent de manière pré­dé­fi­nie. A la fin du site, vous ne trouverez qu’un lien vers des tutoriels payants.

Derrière l’animation parallaxe se trouve le plugin jQuery Plax de Cameron McEfee, qui est dis­po­nible gra­tui­te­ment pour les ad­mi­nis­tra­teurs de sites Web via GitHub sous licence MIT. La par­ti­cu­la­rité de Plax : le plugin chamboule les habitudes de vi­sua­li­sa­tion des in­ter­nautes. Ici, l’avant-plan ne se déplace pas plus vite que l’arrière-plan, mais sim­ple­ment dans le sens inverse. L’objectif est de créer un sentiment de dé­so­rien­ta­tion chez le spec­ta­teur, ce qui fait très bien échos au propos d’une page 404 (qui indique que l’in­ter­naute s’est trompé de chemin).