Parallax scene

Ce qui est inclus

Un décor en onze plaques réparties dans un même espace en trois dimensions, dans deux fichiers plus ses dessins : une feuille de style, un script, et huit SVG. Aucune dépendance, aucune étape de build, aucune requête externe — on copie le dossier dans un projet et ça marche.

Aucune plaque n’est animée séparément. Elles sont posées à des profondeurs différentes, l’espace entier s’incline de dix degrés au plus vers le pointeur, et c’est la perspective qui fait le reste : une plaque à la profondeur z s’affiche à 1 / (1 − z / perspective) de sa taille et se déplace d’autant. Une seule ligne explique donc toutes les vitesses de la scène.

Les dessins sont des SVG originaux, faits pour ce composant. Ce sont des fichiers texte de quelques kilo-octets : on les ouvre, on change une couleur, on remplace une crête. La géométrie ne bouge pas — profondeur et dessin sont séparés.

Fonctionnalités

• Une variable pour tout — --pxs-scene-width remet à l’échelle le dessin et l’effet. Les profondeurs sont des ratios de cette longueur, pas des pixels : la composition est donc identique à 340 comme à 1900 pixels de large.
• Marche sans JavaScript — le décor est composé, la lumière et le voile sont là. Il ne manque que l’inclinaison, la seule chose que le script apporte.
• Le script n’écrit que deux nombres — la position du pointeur, amortie par un ressort, entre −1 et 1. Les angles, les couleurs et les durées restent des variables CSS : on les règle sans ouvrir le JavaScript.
• Repère au choix — data-tracking="viewport" pour une scène en pleine page, "element" dès qu’il y en a plusieurs sur la même page.
• Ressort réglable à chaud — data-stiffness, data-damping et data-mass sont relus quand ils changent.
• Mouvement réduit respecté — sous prefers-reduced-motion, plus d’inclinaison, plus de fondu, et les délais tombent à zéro. Ce qui est une image et non un mouvement — la profondeur, le voile, les rais de lumière — reste.
• Le titre est du texte — pas une image. Il se lit, se sélectionne, se traduit, et ne pèse rien.

Le poser dans une page

Deux fichiers à charger, puis une plaque par couche :

<link rel="stylesheet" href="parallax-scene.css">
<script src="parallax-scene.js" defer></script>

<div class="parallax-scene" data-tracking="viewport">
  <div class="parallax-scene__probe" aria-hidden="true"></div>
  <div class="parallax-scene__stage">
    <div class="parallax-scene__plate parallax-scene__plate--sky">
      <img src="art/sky.svg" alt="" width="1369" height="1000">
      <p class="parallax-scene__headline">Horizons</p>
    </div>
    <div class="parallax-scene__plate parallax-scene__plate--clouds">
      <img src="art/clouds.svg" alt="" width="1369" height="1000">
    </div>
    <!-- … huit autres plaques, du fond vers l’avant … -->
    <div
      class="parallax-scene__plate parallax-scene__plate--vignette"
    ></div>
  </div>
</div>

L’ordre du DOM est l’ordre de la profondeur, du fond vers l’avant : c’est la seule chose à respecter si on ajoute une plaque. Le composant se donne une hauteur tout seul ; donnez- lui height: 100svh pour une bannière pleine page, et il remplira la boîte.

Ce qu’il faut savoir

• La scène déborde sa boîte, exprès. Elle la couvre comme une image en cover : la plaque du ciel s’affiche à 131 % de la scène. Le débordement est clippé et ne défile pas — mesuré, la page ne déborde jamais d’un pixel de 320 à 1600 — mais un scrollWidth lu sur le composant lui-même renverra plus que sa largeur, et c’est normal.
• Le tactile est laissé de côté. Un doigt est le pointeur : la scène sauterait là où il se pose et le suivrait, ce qui se lit comme un bug plutôt que comme de la profondeur. Souris et stylet seulement.
• L’effet est décoratif. Il n’expose aucun réglage, donc le composant n’ajoute rien au parcours au clavier — il n’y a rien à y opérer. Les plaques sont des images vides d’alt : elles ne sont pas dans l’arbre d’accessibilité. Seul le titre en est, parce que c’est du vrai texte.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML. Le script écrit ses deux nombres par le CSSOM, qui passe là où une balise <style> serait refusée.
• La géométrie vient d’ailleurs, le dessin non. Les profondeurs, la perspective, les angles et la loi du ressort sont relevés sur un composant Framer commercial — mesurés à la sonde et recoupés avec les constantes de son propre code. Les dessins, le CSS et le JavaScript sont originaux : rien n’a été repris de son implémentation ni de ses illustrations.