Perspective Scroll
Quatre panneaux colorés (« Layer 1 » à « Layer 4 ») naissent à 1 200 px de profondeur et foncent vers l'écran jusqu'à le dépasser en 8 s, un toutes les 2 s, chacun avec son propre décalage : un tunnel de panneaux en CSS pur (perspective, translateZ, tri par profondeur), sans défilement ni JavaScript malgré le nom, posés en escalier immobile si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0024-root (fond #0a0a0f, 300 px de haut au minimum, overflow: hidden) contient le conteneur .perspective-scroll-container (toute la largeur × 250 px, perspective: 500px) et quatre .perspective-plane posés au centre : indigo 120 × 60 px, rose 100 × 50, vert 140 × 70 et ambre 90 × 45, translucides à 70 %. Une seule animation, fx0024Fly, linéaire sur 8 s, les fait voyager de translateZ(-1200px) à translateZ(200px) ; l'opacité passe de 0 à 1 sur les 10 premiers pour cent, reste à 1 jusqu'à 80 %, puis retombe à 0. Avec une perspective de 500 px, un panneau s'affiche à 29 % de sa taille au départ (500 / 1 700) et à 167 % à l'arrivée (500 / 300) : il grossit près de six fois pendant son vol, puis s'efface avant de passer « derrière » le spectateur.
Chaque panneau porte deux variables, --fx0024-x et --fx0024-y (−50 % / −50 % = centré ; puis −80 % / −80 %, −20 % / −30 %, −70 % / −20 %), reprises dans les deux étapes des keyframes : le décalage tient pendant tout le vol, et comme la perspective l'agrandit avec le panneau, les quatre s'écartent du centre en approchant, comme les parois d'un tunnel. Les délais sont négatifs (0, −6, −4 et −2 s) : dès le chargement, les quatre panneaux sont déjà en vol à quatre profondeurs différentes, espacés de 2 s, et un nouveau panneau arrive toutes les 2 s. Mesuré dans Chromium 151 et Firefox 153 : 5,4 à 5,8 % des pixels de la scène changent en 0,8 s, les variables dans les keyframes sont lues par les deux.
Le conteneur porte transform-style: preserve-3d : les panneaux sont triés par profondeur, et celui qui approche passe devant celui qui part du fond. C'est pourquoi le conteneur n'a pas d'overflow et que c'est la racine qui coupe ce qui déborde : mesuré dans Chromium et Firefox, overflow: hidden et même overflow: clip sur le conteneur aplatissent la scène, et les panneaux se peignent alors dans l'ordre du HTML, un panneau lointain par-dessus un panneau proche. Aucune ligne de JavaScript : le navigateur anime quatre transform et quatre opacity. Le nom du catalogue parle de « Scroll », mais rien n'écoute le défilement : la boucle tourne seule, à la place où vous posez l'effet.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0024-rootarrête l'animation et pose les quatre panneaux en escalier, de −600 px (en haut à gauche) à 0 px (en bas à droite) : une image fixe du tunnel où chaque étiquette reste lisible. Mesuré : 0 % des pixels changent en 0,8 s dans Chromium, Firefox et WebKit (5,4 à 5,8 % sans la préférence). Ce réglage compte ici plus qu'ailleurs : un contenu qui fonce vers le spectateur est le type de mouvement qui gêne les personnes sensibles au vertige. - Texte : les étiquettes sont du vrai texte, lu par les lecteurs d'écran dans l'ordre du HTML, quelle que soit la position du panneau. À l'écran, chacune n'est lisible que quelques secondes par boucle : ne confiez pas aux panneaux une information qui n'existe nulle part ailleurs, comme le font les scènes ci-dessus (la liste des dates ou des noms reste dans la page).
- Contraste : texte blanc sur panneaux à 70 % posés sur
#0a0a0f, calculé à 7,3:1 sur l'indigo, 6,2:1 sur le rose, 4,6:1 sur le vert et 4,0:1 sur l'ambre. L'ambre reste sous le seuil de 4,5:1 d'un petit texte : foncez-le ou passez son texte en noir si l'étiquette doit être lue. Pendant les fondus d'entrée et de sortie, le contraste baisse avec l'opacité. - Rythme : une boucle continue de 8 s, sans clignotement ni changement brusque de luminosité ; aucune interaction, rien à atteindre au clavier.
Compatibilité navigateur
CSS seul : perspective, transform-style: preserve-3d, translateZ et variables CSS lues dans des @keyframes, zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même vol, même tri par profondeur, même arrêt en mouvement réduit ; deux copies de l'effet sur une page fonctionnent (aucun id). Le WebKit de Playwright (26.5) aplatit toute 3D CSS, même un cube témoin : le rendu sur Safari n'a pas été vérifié sur un vrai Safari.
Si une règle de votre page ajoute overflow, filter ou une opacity inférieure à 1 au conteneur, la scène est aplatie (mesuré dans Chromium et Firefox pour les trois) : les panneaux volent toujours, mais s'empilent dans l'ordre du HTML au lieu d'être triés par profondeur. Les étiquettes restent du texte dans la page, même quand l'animation ne tourne pas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0024-root">
<div class="perspective-scroll-container">
<div class="perspective-plane plane-1">Layer 1</div>
<div class="perspective-plane plane-2">Layer 2</div>
<div class="perspective-plane plane-3">Layer 3</div>
<div class="perspective-plane plane-4">Layer 4</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Vitesse (CSS — 8s dans les quatre animation) |
8 s, délais 0 / −6 / −4 / −2 s | Changez les quatre durées ensemble et gardez des délais égaux à 0, −¾, −½ et −¼ de la durée : à 12 s, prenez 0 / −9 / −6 / −3 s. Un panneau arrive alors toutes les 3 s au lieu de 2. |
Profondeur du vol (CSS — translateZ(-1200px) et translateZ(200px) des keyframes) |
−1 200 px → +200 px | Un départ plus lointain rend le panneau plus petit au début (−2 000 px : 20 % de sa taille). L'arrivée doit rester sous la valeur de perspective (500 px) : au-delà, le panneau est derrière le spectateur et disparaît. |
Perspective (CSS — .perspective-scroll-container) |
500px | Plus petite, la croissance est plus brutale : à 300 px, un panneau passe de 20 % à 300 % de sa taille. Plus grande (900 px), le vol devient un glissement doux. Si vous la baissez sous 200 px, baissez aussi l'arrivée du vol. |
Décalages (CSS — --fx0024-x et --fx0024-y de chaque .plane-N) |
−50 / −50 %, −80 / −80 %, −20 / −30 %, −70 / −20 % | En pourcentage de la taille du panneau ; −50 % = centré. Plus on s'éloigne de −50 %, plus le panneau s'écarte du centre en approchant : de −110 % à +10 %, le tunnel s'ouvre nettement ; des valeurs positives (+40 %) envoient tous les panneaux d'un même côté, comme des panneaux de bord de route. |
Panneaux (HTML et CSS — .perspective-plane, .plane-1 à .plane-4) |
4 panneaux, 90 à 140 px de large, couleurs à 70 % | Mettez n'importe quel texte ou image dans un panneau. Pour un cinquième panneau, copiez une règle .plane-N et répartissez les délais sur la durée (8 s / 5 = un délai tous les −1,6 s). Agrandir les panneaux (200 px et plus) rend les étiquettes lisibles plus tôt dans le vol. |
Fond et cadre (CSS — .fx-0024-root) |
#0a0a0f, 300 px de haut minimum | Changez ou retirez le fond de la racine pour poser le tunnel sur votre décor. Gardez son overflow: hidden : c'est lui qui coupe les panneaux agrandis, puisque le conteneur ne doit pas en avoir. |
FAQ
overflow: hidden, et même avec overflow: clip, sur l'élément qui porte preserve-3d, les panneaux ne sont plus triés par profondeur et se peignent dans l'ordre du HTML : un panneau lointain passe par-dessus un proche. La coupe est donc confiée à la racine .fx-0024-root, un cran plus haut. filter et une opacity inférieure à 1 sur le conteneur ont le même effet (mesuré aussi).
