Faites défiler l'écran de gauche. Une seule timeline, celle de la section, fait avancer quatre calques en même temps. Chaque calque a sa propre amplitude : c'est elle qui décide s'il semble loin ou proche. Activez les rayons X pour voir les boîtes qui dépassent de la section.
Défilez vers le bas. La section avec la vallée va entrer par le bas de l'écran.
Pendant qu'elle traverse l'écran, sa timeline va de 0 % à 100 %.
La section est sortie par le haut : sa timeline est à 100 %.
Remontez : tout revient en arrière, parce que l'animation suit le défilement, pas le temps.
Changez l'amplitude d'un calque et défilez à nouveau. Amplitude positive : le calque glisse vers le bas dans la section, il monte moins vite que le texte, il semble loin. Négative : il glisse vers le haut, il monte plus vite, il semble proche.
| Calque | Amplitude | translateY maintenant | Vitesse à l'écran |
|---|
Il se met à jour avec vos amplitudes. Un seul @keyframes pour tous les calques : chaque calque lui donne ses propres valeurs avec deux variables.
--scene avec view-timeline-name. Tous les calques suivent cette timeline : ils avancent ensemble, de 0 % à 100 %, pendant que la section traverse l'écran.top et bottom négatifs) doit couvrir tout le déplacement. Ici, elle est calculée pour vous; en rayons X, vous voyez les boîtes dépasser.overflow: clip cache ce qui dépasse. Coupez les rayons X : seule la partie des calques à l'intérieur de la section reste visible.scroll() plutôt qu'une timeline nommée, et date de 2023 (le support des navigateurs a changé depuis).@supports et le mouvement réduit. Du code, sans démo visuelle.view() passe de 0 % à 100 %.