C’est probablement la première question que je me suis posée quand j’ai  créé le Café, et même plus tôt encore, alors que je venais tout juste de finir mes études. J’ai découvert la parallaxe, et j’ai immédiatement pensé à toutes les applications possibles de cette technique en l’incluant dans une illustration.

Qu’est-ce que la parallaxe ?

La parallaxe, c’est le mouvement que semblent faire les objets lorsque vous vous déplacez. Exemple concret : lorsque vous êtes en voiture ou en train et que vous avez un paysage assez large (une plaine avec des montagnes au loin, par exemple), l’arrière-plan semblera se déplacer beaucoup moins vite que le premier plan. Cela contribue notamment à créer un effet de profondeur.

En webdesign, la parallaxe est un procédé technique permettant de dissocier le mouvement du premier plan et de l’arrière-plan. Plusieurs types de parallaxe existent, en voici quelques exemples :

  • La parallaxe au scroll : un peu comme pour le trajet en voiture, mais verticalement. Au scroll, des objets au premier plan n’ont pas la même vitesse qu’en arrière-plan. Petit exemple : http://www.tioluchin.com/ (attention, il y a du son !)
  • La parallaxe « interactive » qui suit la souris : les mouvements des différents plans se font en fonction de ta façon de bouger la souris. Exemple : http://piratecode.ru/en/ (regarde bien les vagues !)
  • La parallaxe « autonome » : On la voit d’ailleurs sur les vagues du site précédent. Ce que j’appelle « la parallaxe autonome » est en réalité comme la parallaxe interactive, sauf que ce n’est pas en fonction de la souris qu’est initié le mouvement, mais en fonction du temps. Les objets semblent flotter tous seuls dans les airs. On pourrait aussi le faire en GIF, mais ce serait tellement moins cool…

Je pense que 2014/2015 était l’âge d’or de la parallaxe. On a vu circuler des sites de toute sorte, tous plus beaux les uns que les autres. Mais certaines de ces techniques ne fonctionnent pas sur mobile, or le smartphone se targue d’une part de marché de plus en plus conséquente dans le domaine du web…

Cependant, certaines subsistent et ressuscitent même !  J’ai découvert des prototypes de parallaxe utilisant l’accéléromètre du smartphone, ce qui serait une bonne idée, vu que cette technique est déjà connue des créateurs d’applications mobiles !

Mais revenons-en au sujet principal.

Parallaxe et Illustré Dynamique

On pourrait donc animer légèrement une case peu vivante d’un Illustré Dynamique avec de la parallaxe. Pour cela, plusieurs problématiques me semblaient importantes :

  • Permettre à l’utilisateur d’interagir avec l’élément en mouvement serait un plus, je dirais même un must. (Ce n’est pas un Illustré Dynamique pour rien)

  • Faire en sorte que le mouvement soit également présent sur smartphone (bah oui, c’est un peu le concept du Café des Récits à la base !) et ce, même si c’est encore rare pour de la parallaxe.

  • Avoir trois plans distincts, au lieu de deux (le plus courant sur des sites web avec de la parallaxe) : un premier plan, un arrière-plan, et mon personnage au milieu.

Evidemment, sur ordinateur, j’ai opté pour une parallaxe à la souris. L’utilisateur voit une image statique et bouge sa souris au hasard pour se rendre compte que c’est interactif : c’est ma façon de récompenser le spectateur aventureux. C’est subtil, mais facétieux.

Sur téléphone, on ne peut pas appliquer la parallaxe à la souris, vu qu’il n’y en a pas. Et je n’apprécie pas vraiment de mettre mon doigt sur une image pour voir son mouvement, en occultant une bonne partie de celle-ci. Reste l’accéléromètre,  mais je dispose encore trop peu d’informations me permettant de faire en sorte que ce soit compatible Android avec plusieurs plans en mouvement. Quel dommage… J’ai donc eu recours à un plan B : la parallaxe autonome.

Voyons ce que ça donne !

La démo !

Normalement, je lie les deux versions avec une détection d’interface, afin que celui qui est sur ordinateur ait accès à la parallaxe qui lui corresponde uniquement, et idem pour le smartphone. Mais je sais que certains auront envie de voir les deux sur un ordinateur, alors je les ai séparées !

Si vous consultez la version ordi sur smartphone, je rappelle : vous ne verrez aucune interaction, ce code étant fait pour un survol.

Ah ! Dernière chose : je ne mets jamais de version optimisée de mes codes sur le Labo du Café, je suis un peu possessive avec mes créations… Ceci est donc un prototype. Je vous déconseille d’essayer de copier-coller mon JavaScript tel quel, ou alors à vos risques et périls ! En revanche, libre à vous de le lire, l’inspecter, le décortiquer, vous en inspirer. Et de poser des questions !

Démo ordi
Démo smartphone