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 :
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 :
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 !