La parallaxe¶

D'où vient le mot¶

Tendez le bras, levez le pouce, et regardez-le en fermant un œil, puis l'autre. Votre pouce semble sauter par rapport au mur du fond. Ce déplacement apparent, selon le point de vue, c'est la parallaxe.

Vous la vivez aussi en train ou en voiture : les poteaux au bord de la route défilent à toute vitesse, les arbres un peu plus loin passent plus lentement, et les montagnes à l'horizon semblent presque immobiles. La vitesse apparente dit la distance. C'est un des indices que votre cerveau utilise pour percevoir la profondeur.

Avant le Web : l'animation et les jeux vidéo¶

• Au cinéma d'animation : dès les années 1930, les studios Disney utilisent la caméra multiplane (en anglais) , où les décors sont peints sur des plaques de verre superposées, à des distances différentes. En déplaçant les plaques à des vitesses différentes, une image plate prend de la profondeur.
• Dans les jeux vidéo en 2D : dans les jeux de plateforme à défilement horizontal, l'arrière-plan est composé de plusieurs bandes (le ciel, les montagnes, la forêt) qui défilent chacune à sa vitesse derrière le personnage.

Dans les deux cas, le principe est celui que vous allez coder : des calques, et une vitesse par calque.

Sur le Web, au défilement¶

Sur une page, il n'y a pas de caméra : c'est le défilement qui la remplace. Quand le visiteur défile, tout le contenu monte à l'écran à la même vitesse. Pour créer la profondeur, on ralentit ou on accélère certains calques par rapport au défilement :

Calque	Vitesse par rapport au défilement	Effet
Le fond (ciel, montagnes)	beaucoup plus lent	semble très loin
Les plans du milieu	un peu plus lent	semble à mi-distance
Le contenu (texte)	la même vitesse	le plan de référence
L'avant-plan (feuillage, objets)	plus rapide	semble passer tout près

On rencontre surtout trois formes :

1. L'arrière-plan lent : une seule image de fond défile plus lentement que le texte. C'est la forme la plus simple, et la plus courante.
2. La scène en calques : une image découpée en plans (fond, milieu, avant), chacun à sa vitesse. C'est le média animable « image en calques » de votre récit défilant.
3. La parallaxe au pointeur : les calques bougent selon la position de la souris (ou l'inclinaison du téléphone) plutôt qu'au défilement. Même principe, autre déclencheur.

Les bonnes pratiques¶

• Subtile : quelques pourcentages de différence de vitesse suffisent. Au-delà, la page « flotte » et le texte devient difficile à suivre.
• Le texte reste stable : on fait bouger le décor, pas ce qu'on doit lire.
• Animer seulement transform : jamais top, margin ou background-position, qui ralentissent la page.
• prefers-reduced-motion : pour les personnes sensibles au mouvement, la parallaxe peut causer des étourdissements ou des nausées. Avec le mouvement réduit, les calques restent immobiles.
• Sur mobile : moins de calques, des amplitudes plus petites, ou pas de parallaxe du tout.

Des exemples¶

• Firewatch : le site du jeu. Défilez au tout début : six calques de paysage, du ciel jusqu'aux arbres du premier plan. Un classique de la scène en calques.
• Paysage en parallaxe, de isladjan (CodePen) : une scène de paysage animée au défilement, avec le code à côté.
• Ballons dans le ciel (vidéo) : un ancien exercice du programme, des ballons et des nuages à des vitesses différentes. Le même principe que votre exercice.
• The Goonies : un hommage au film. On plonge vers la côte, entre des plans qui défilent à des vitesses différentes.
• Montagnes, forêt et nuages : un exemple simple et très propre de scène en calques. Proche de ce que vous ferez.
• The Boat (SBS, Australie) : un roman graphique interactif, avec du son. Les dessins sont découpés en plans qui glissent à des vitesses différentes : la parallaxe au service d'un récit défilant.
• Une parallaxe en CSS pur, de Keith Clark : une démo sans JavaScript. Ouvrez les outils de développement pour voir les calques.

Le faire en CSS¶

La technique : un classique, le parallax Exercice : la parallaxe en calques