Parallax Layers

Le HTML vendu emboîte trois cadres et cinq plans. Le cadre .demo-preview (flex centré, min-height: 300px, position: relative, fond #0a0a0f) contient le défileur .parallax-container (100% × 280 px, overflow: hidden auto, scroll-timeline: --parallaxScroll y), qui contient la piste .parallax-scene (height: 600%, soit 1 680 px), qui contient le viewport .parallax-viewport (position: sticky; top: 0, 280 px, overflow: hidden). La course vaut 1 680 − 280 = 1 400 px et le viewport, collé au haut du défileur, ne quitte jamais le cadre (mesuré : bord haut constant du premier au dernier pixel). Dedans, cinq plans en position: absolute : .parallax-stars (100 % du viewport, huit .p-star blanches de 2 px — deux de 3 px — entre 5 et 30 % du haut, opacités .3 à .8), .parallax-moon (30 px, top: 20px; right: 30px, dégradé radial #e0e7ff → #a5b4fc, halo de 20 px), puis trois bandes ancrées en bas par .slr-parallax-layer (bottom: 0) : .slr-parallax-bg (180 px de dégradé indigo, dont les deux crêtes sont des triangles de bordure de 280 × 140 px à left: -10% et 240 × 110 px à right: -5%), .parallax-mid (120 px, dont le ::before de 80 px porte deux dégradés radiaux violet et indigo : la brume) et .parallax-fg (60 px, rgba(15,15,26,.95) vers transparent : le sol). Sous le défileur, l'indice .slr-scroll-hint « Scrollez pour le parallax » (11,2 px, blanc à 40 %, bottom: 8px du cadre) rebondit de 4 px toutes les 2 s. Le champ JavaScript est vide.

Le moteur tient en deux propriétés. scroll-timeline: --parallaxScroll y sur le défileur déclare une timeline nommée qui suit sa position verticale ; chaque plan y attache son animation par animation-timeline: --parallaxScroll, avec animation-duration: auto, animation-timing-function: linear, animation-fill-mode: both et animation-range: normal : la progression vaut scrollTop ÷ 1400. Quatre @keyframes, tous en translateY : parallaxStars 20 → −20 px (étoiles et lune), parallaxSlow 40 → −40 px (crêtes), parallaxMed 80 → −80 px (brume), parallaxFast 120 → −30 px (sol). Plus le plan est proche, plus il court : 40, 80, 160 et 150 px sur la même course, soit 1 px pour 35 px défilés au fond et 1 px pour 8,75 à la brume. Mesuré dans Chromium 151 et WebKit 26.5, page vierge, valeurs identiques : à 140 px de défilement (10 %), 16 / 32 / 64 / 105 px ; à 700 px (50 %), 0 / 0 / 0 / 45 ; à 1 400 px, −20 / −40 / −80 / −30. Deux copies collées dans la même page donnent deux défileurs et deux timelines indépendantes (mesuré : chacune poussée à 700 px, chacune à 0) — pas d'id, rien à renommer.

Au repos, la scène est enfoncée : les bases des crêtes sont 40 px sous le bord bas, la brume et le sol sont entièrement hors cadre, la lune est à 40 px du haut. En défilant, tout remonte à des vitesses différentes ; à mi-course les crêtes touchent le bord et le sol montre ses 15 premiers pixels ; en fin de course les crêtes flottent 40 px au-dessus du bord, le sol occupe la bande 208–268 px du viewport et laisse sous lui 30 px de fond de cadre (sa dernière image-clé est −30, pas 0), la lune touche le bord haut. Le viewport est transparent : le ciel est le fond de .demo-preview. Deux règles tiennent l'ensemble. La hauteur fixe du défileur : en height: 100% sous un parent sans hauteur définie, il retombe à la hauteur de son contenu, la course vaut 0 et rien ne bouge (mesuré dans les trois moteurs). Et l'overflow: hidden du viewport, qui coupe les crêtes débordantes et le sol enfoncé de 120 px au repos — sans lui, le viewport gagnerait sa propre barre de défilement.

CSS seul : scroll-timeline (timeline nommée), animation-timeline, animation-range, animation-duration: auto, position: sticky, overflow: hidden auto, dégradés, triangles de bordure, cinq @keyframes. Zéro dépendance, zéro JavaScript. Les animations pilotées par le défilement existent dans Chrome et Edge 115+, Safari et iOS 26+ (mesuré dans WebKit 26.5 : mêmes valeurs que Chromium 151 à chaque position). Firefox : aucune version. Mesuré dans Firefox 153 : CSS.supports('animation-timeline: scroll()') répond faux et animation-duration: auto est calculée 0s. Le repli @supports not (animation-timeline: scroll()) du code vendu met animation: none sur les cinq plans : chacun reste à sa place de repos (transform: none mesuré à 0, 350, 700, 1 050 et 1 400 px de défilement) — étoiles et lune en haut, crêtes et brume posées sur le bord bas, sol collé au bord. Le défileur défile normalement sur 1 400 px, le viewport reste épinglé, l'indice rebondit : un visiteur Firefox voit une scène de nuit fixe et complète, que le défilement ne fait pas bouger. Sans ce repli, il verrait les images-clés finales : plans remontés de 20 à 80 px et bande vide de 30 px sous le sol (mesuré).