/* ===================================================================== WTV web — le mouvement lie au DEFILEMENT Une animation ordinaire suit un chronometre : elle part, elle dure, elle finit, que tu regardes ou non. Celles-ci suivent TA POSITION — une rangee se leve au fur et a mesure qu'elle entre dans l'ecran, et redescend en sortant. Le mouvement est attache a ton pouce. Elles sont arrivees dans Safari 26 (septembre 2025) et tournent HORS du fil principal : elles ne coutent rien au defilement. C'est la raison principale de les choisir ici plutot qu'une bibliotheque — nos rangees chargent leurs images pendant qu'on fait glisser, et c'est precisement la que tout se joue. `@supports` garde la porte : un navigateur qui ne connait pas `animation-timeline` ne recoit rien du tout et affiche la page comme avant, sans la moindre transparence. ===================================================================== */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* ---- 1. LES RANGEES QUI SE LEVENT ------------------------------ `view()` mesure la traversee de l'element dans son conteneur de defilement — ici `#screen-home`. La plage s'arrete a `entry 65%` : la rangee a fini de se poser bien avant d'etre au centre, sinon on lirait un titre encore en mouvement. On ne touche ni a la television ni a la souris : la regle exige le toucher. */ /* DEUX PIEGES, tous deux trouves en mesurant et non en relisant. 1. La forme raccourcie `animation:` remet la DUREE a zero, ce qui annule une animation pilotee par le defilement — elle n'a alors plus rien a parcourir. Il faut les proprietes detaillees et `animation-duration: auto`, qui veut dire « toute la plage ». 2. `animations.css` fait deja entrer les rangees en cascade, avec `#screen-home.is-active .rail:nth-child(-n+5)`. Comme chaque rangee est SEULE dans son conteneur, ce `nth-child` les attrape TOUTES — et sa specificite battait la mienne. D'ou le `.is-active` ajoute ici : il ne sert qu'a passer devant. On remet aussi le retard a zero, sinon celui de la cascade subsiste. Les rangees deja a l'ecran au chargement sont, par construction, en fin de plage : elles s'affichent pleines, sans rien attendre. */ html.wtv-tactile #screen-home.is-active .rail { animation-name: wtv-levee; animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 65%; } @keyframes wtv-levee { from { opacity: 0; transform: translateY(38px) scale(.975); } to { opacity: 1; transform: none; } } } } /* ===================================================================== 2. LA BARRE QUI S'EFFACE QUAND ON DESCEND Elle revient des qu'on remonte, et des qu'on touche le haut. Ce n'est pas qu'une coquetterie : elle rend une bande d'ecran a l'image quand on parcourt le catalogue, et c'est le comportement de toutes les applications natives. Le sens du defilement ne se lit pas en CSS — il faut comparer deux positions. C'est tout ce que fait `mouvement.js`, et il ne fait rien d'autre que poser cette classe. ===================================================================== */ html.wtv-barre-cachee #wtv-barre { transform: translateX(-50%) translateY(calc(96 * var(--wtv-u))); opacity: 0; pointer-events: none; } #wtv-barre { transition: transform .34s cubic-bezier(.32,.72,0,1), opacity .24s ease; } /* La feuille du profil ne survit pas au depart de la barre : elle flotterait toute seule au-dessus du vide. */ html.wtv-barre-cachee #wtv-feuille { display: none !important; } /* ===================================================================== 3. LA BANNIERE EN PARALLAXE Sur une fiche, l'image du haut derive vers le haut et se resserre pendant que le texte monte par-dessus. Deux plans qui ne vont pas a la meme vitesse : c'est tout ce qu'il faut pour donner de la profondeur, et c'est le geste des pages produit d'Apple. ---- La difficulte, et sa solution --------------------------------- La banniere n'est PAS dans la zone qui defile : `#detail-scroll` contient le texte, la banniere est sa voisine. `scroll()` cherche le conteneur de defilement le plus proche en REMONTANT — il ne l'aurait donc jamais trouvee. On nomme donc la chronologie. `#detail-scroll` la publie, et `timeline-scope` sur l'ecran la rend visible a ses voisins. Sans ce `timeline-scope`, un nom ne descend qu'aux enfants. La plage est donnee en pixels de la grille et non en `vh` : la page est reduite par un `zoom`, et les unites d'ecran n'y veulent plus dire la meme chose. ===================================================================== */ @supports (animation-timeline: scroll()) and (timeline-scope: --x) { @media (prefers-reduced-motion: no-preference) { html.wtv-tactile #screen-detail { timeline-scope: --wtv-fiche-defile; } html.wtv-tactile #detail-scroll { scroll-timeline: --wtv-fiche-defile block; } html.wtv-tactile #screen-detail.is-active .hero--detail { animation-name: wtv-parallaxe; animation-duration: auto; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --wtv-fiche-defile; animation-range: 0 1000px; will-change: transform; } /* Elle monte deux fois moins vite que le texte et se resserre un peu : sans ce resserrement, le haut de l'image se decollerait du bord et laisserait une bande. */ @keyframes wtv-parallaxe { from { transform: none; } to { transform: translateY(-9%) scale(1.09); } } } } /* --------------------------------------------------------------------- 4. LA BANNIERE QUI RESPIRE La parallaxe ci-dessus ne s'anime que si la page DEFILE. Mesure faite sur un iPhone 14 Pro Max : la fiche d'un film tient entierement dans l'ecran — 631 px de contenu pour 932 disponibles. Rien ne defile, donc rien ne bouge. Elle ne servira que sur les series a longue liste d'episodes, ou sur une tablette. Pour le reste, on donne a l'image un mouvement propre : un tres lent resserrement pendant qu'on lit. Il ne se remarque pas, il se ressent — c'est le procede des documentaires sur les photographies fixes. UNE SEULE PASSE, pas de boucle : une animation perpetuelle sur un telephone, c'est du calcul graphique qui tourne tant que la page est ouverte, donc de la batterie. Seize secondes suffisent largement au temps qu'on passe sur une fiche. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html.wtv-tactile #screen-detail.is-active .hero__art { animation: wtv-respire 16s var(--wtv-pose) both; } @keyframes wtv-respire { from { transform: scale(1.005); } to { transform: scale(1.055) translateY(-1.2%); } } } /* --------------------------------------------------------------------- 5. LE REFLET QUI GLISSE SUR LA BARRE `mouvement.js` publie `--wtv-lumiere`, entre 0 et 1, au fil du defilement. On s'en sert pour incliner la brillance et decaler les deux liserets colores — le reflet se deplace au lieu d'etre peint. La valeur de repli (0.5) est celle du milieu : sans le script, la barre garde exactement l'aspect qu'elle avait. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html.wtv-tactile #wtv-barre { background: linear-gradient( calc(112deg + var(--wtv-lumiere, .5) * 86deg), rgba(255,255,255,.19) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.10) 100%); } /* Les deux liserets se decalent en sens INVERSE l'un de l'autre : une lumiere qui traverse un bord epais separe ses couleurs, elle ne les translate pas ensemble. C'est ce qui donne l'impression que le materiau a une epaisseur. */ html.wtv-tactile #wtv-barre::after { box-shadow: inset calc((1.4 + (var(--wtv-lumiere, .5) - .5) * 2.4) * var(--wtv-u)) 0 rgba(255, 86, 116, .42), inset calc((-1.4 + (var(--wtv-lumiere, .5) - .5) * 2.4) * var(--wtv-u)) 0 rgba(54, 226, 255, .38), inset 0 calc(1.2 * var(--wtv-u)) rgba(255,255,255,.50), inset 0 calc(-18 * var(--wtv-u)) calc(30 * var(--wtv-u)) rgba(255,255,255,.07); } }