Immersive Depth Scroll
Trois cadres translucides emboîtés (150, 100 et 60 px de large), posés à trois profondeurs, que le pointeur décale, plus fort pour les plus lointains : le centre se creuse en tunnel et revient en place quand le pointeur sort — on le pilote aussi au doigt ou aux flèches ; malgré le nom, le défilement de la page n'y joue aucun rôle, et les cadres ne bougent plus si le réglage « réduire les animations » est actif.
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
Dans .fx-0049-root, fond quasi noir, se trouve .xr-depth-scroll : toute la largeur, 300 px de haut, en perspective: 400px, qui écoute le pointeur. Elle superpose trois .xr-depth-layer en position: absolute; inset: 0, qui centrent chacun un cadre .xr-depth-shape arrondi à 12 px, bordé d'indigo à 20 % : 150 × 100 px presque transparent, 100 × 70 px un peu plus dense, 60 × 40 px le plus soutenu. Le deuxième calque est reculé de 30 px et le troisième de 60 px (translateZ) : la perspective les réduit à 93 % et 87 %, ce qui creuse l'emboîtement dès le repos. Les emoji des deux grands cadres sont posés dans leur coin haut gauche et celui du petit au centre, pour que les trois restent lisibles.
Une instance du script tourne pour chaque zone de la page. Elle repère le pointeur par rapport au centre, de −0,5 à +0,5, et décale chaque calque de cette valeur multipliée par 15, 30 puis 45 px, en gardant sa profondeur : le cadre du fond bouge trois fois plus que celui de devant, si bien que le centre semble s'ouvrir vers le pointeur, comme un tunnel qu'on regarde de biais. Pointeur posé à 5 % du coin haut gauche, le petit cadre part de 20,25 px sur chaque axe, dans Chromium 151 comme dans Firefox 153. Le glissement est amorti sur 0,3 s ; quand le pointeur sort, les trois cadres reviennent au centre.
Malgré le mot « Scroll » du nom, le défilement de la page ne joue aucun rôle : seul le pointeur pilote les cadres. Stylet et doigt passent par les mêmes événements pointer que la souris ; avec touch-action: pan-y, un geste vertical fait toujours défiler la page et seul un glissé latéral creuse le tunnel. Côté clavier, la zone reçoit le focus (tabindex="0") et porte un nom (role="group", aria-label) ; les flèches poussent le tunnel d'un dixième par appui, Échap ou la perte du focus le recentrent. Les calques sont enfants directs de l'élément en perspective, sans preserve-3d : leur profondeur ne dépend d'aucun parent intermédiaire.
Accessibilité
- Mouvement réduit : quand
prefers-reduced-motion: reduceest actif, les règles@mediaécrites sous.fx-0049-rootsuppriment la transition et clouent chaque calque à sa position de repos (0, −30 et −60 px de profondeur). Les trois cadres restent emboîtés et lisibles, sans décalage sous le pointeur. Sous la souris, Chromium, Firefox et WebKit ne bougent plus d'un pixel (20 px de décalage hors de ce réglage). - Clavier : la zone prend place dans l'ordre de tabulation ; son contour de focus (
#a5b4fc, 2 px, 9,9:1 sur le fond) est tracé vers l'intérieur puisqu'elle occupe toute la largeur. Avec → ×4 puis ↑ ×2, le petit cadre glisse de 18 px vers la droite et de 9 px vers le haut ; Échap ou un Tab de plus le ramènent au centre. - Lecteurs d'écran : on entend d'abord le nom du groupe, « Nested frames: the arrow keys shift them » (
aria-label), puis les trois emoji. Si les cadres portent un sens (des échelles, des étapes), écrivez-le en texte, comme les échelles du muséum, et traduisez l'aria-label; s'ils sont décoratifs, retirez letabindexet masquez la zone avecaria-hidden="true". - Contraste : les cadres sont volontairement pâles (bord indigo à 20 %, fond de 5 à 20 %) : ils sont décoratifs. Pour porter un texte, renforcez la bordure et le fond comme dans la scène du muséum.
Compatibilité navigateur
CSS (perspective sur la zone, translateZ sur ses enfants directs, touch-action, :focus-visible) + JS d'événements pointer, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : mêmes décalages, cadres du fond réduits par la perspective, deux zones indépendantes sur une page, cadres immobiles sous mouvement réduit ; décalage au doigt mesuré dans Chromium en mode tactile. Ici pas de 3D imbriquée : le WebKit de Playwright rend les profondeurs comme Chromium, mais un vrai Safari n'a pas été vérifié.
Sans transformations 3D, les trois cadres gardent leur taille d'origine et se décalent à plat : l'emboîtement reste lisible. Sans :focus-visible, c'est le contour de focus par défaut du navigateur qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0049-root">
<div class="xr-depth-scroll" tabindex="0" role="group" aria-label="…" style="width:100%;min-height:300px;">
<div class="xr-depth-layer">
<div class="xr-depth-shape">🌎</div>
</div>
… (3 calques : 🌎, ⭐, 💎)
</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 |
|---|---|---|
Pas de décalage (JS — (i + 1) * 15) |
15, 30 et 45, soit 7,5, 15 et 22,5 px avec le pointeur au bord de la zone | Pour des cadres de 200 px et plus, montez à 30 ou 40 (les scènes utilisent 40) ; à 15, de grands cadres bougent peu. |
Profondeur des calques (JS — translateZ(-i * 30) ; CSS — translateZ(-30px) et (-60px) des calques 2 et 3, deux fois) |
0, −30 et −60 px | Plus les calques sont reculés, plus ils rapetissent. Changez la valeur aux trois endroits : script, position de repos et bloc de mouvement réduit. |
Perspective (CSS — perspective: 400px de .xr-depth-scroll) |
400px | À 250px, le fond rapetisse nettement (tunnel plus profond) ; à 800px, les trois cadres gardent presque leur taille. |
Sens du tunnel (JS — (i + 1)) |
le cadre du fond bouge le plus | Remplacez par (3 - i) : le cadre de devant bouge le plus, comme une parallaxe classique, et l'emboîtement paraît en relief au lieu d'un creux. |
Cadres (CSS — .xr-depth-layer:nth-child(1) à (3) .xr-depth-shape) |
150 × 100, 100 × 70, 60 × 40 px ; indigo à 5, 10 et 20 % | Tailles, couleurs et formes libres (border-radius en œuf pour des poupées, coins droits pour un cadre). |
Contenu des cadres (CSS — règle des deux grands cadres, align-items et justify-content) |
emoji en haut à gauche pour les deux grands, au centre pour le petit | Centrer les trois superpose leur contenu. Pour des libellés en bas, passez à align-items: flex-end; justify-content: center. |
Hauteur de la zone (HTML — style="min-height:300px" de .xr-depth-scroll) |
300 px | Toute la zone écoute le pointeur : une zone haute donne un geste plus ample pour le même décalage. |
FAQ
my à partir de la position de la zone dans la fenêtre lors du défilement, à la place du pointeur : ce n'est pas ce que fait ce code.(i + 1) par (3 - i) dans le script.
