Glass Depth Stack
Trois plaques de verre empilées en escalier (×0,82, ×0,91, ×1) qui glissent sous le pointeur à trois amplitudes, 8, 16 et 26 px : les couches arrière bougent moins que la couche avant, la profondeur se lit dans l'écart — CSS, variables et 1,3 Ko de JavaScript, figé si l'utilisateur réduit les animations, opaque s'il réduit la transparence.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Une scène en 16/10 (.gds-scene, coins de 14 px, dégradé radial bleu nuit, perspective: 900px) porte trois taches floues rose, cyan et violette, puis la pile .gds-stack : min(70%, 320px) de large au format 4/3, soit 320 × 240 px dès 458 px de cadre. Dedans, trois .gds-layer superposées en inset: 0, coins de 22 px, même verre — dégradé blanc de 16 % à 5 %, liseré blanc à 22 %, backdrop-filter: blur(var(--gds-blur, 6px)) saturate(150%). Elles se distinguent par trois variables : l'échelle --s (0,82 / 0,91 / 1), l'opacité (55 / 75 / 100 %) et l'amplitude --d (8 / 16 / 26 px). Le texte vit sur la couche avant.
Le mouvement tient en une ligne : transform: translate3d(calc(var(--px, 0) * var(--d)), calc(var(--py, 0) * var(--d) + var(--lift, 0%)), 0) scale(var(--s, 1)), adoucie par transition: transform .12s ease-out. Le script écoute pointermove sur chaque .gds-scene de la page (plusieurs piles possibles), calcule la position du pointeur de −0,5 à 0,5 et écrit --px et --py entre −1 et 1, en sens inverse : pointeur à gauche, couches à droite. Mesuré à 20 px des coins dans Chromium, Firefox et WebKit : ±7,6 / 15,2 / 24,7 px en largeur ; à la sortie du pointeur, tout revient à 0. Les couches ne se rapprochent pas en profondeur (la composante Z vaut 0) : la profondeur vient de l'échelle et de l'écart d'amplitude, la couche avant glisse trois fois plus que l'arrière, comme un premier plan vu d'une voiture.
Les réglages de la pile visent une chose : que les trois couches se voient. Réduites à 82 et 91 % et centrées, les couches arrière resteraient entièrement cachées sous la couche avant à toute position du pointeur (leurs bords toujours à l'intérieur de ceux de l'avant, l'écart d'amplitude de 18 px ne compensant pas les 29 px de marge) : la variable --lift (−22 % pour l'arrière, −11 % pour le milieu) les remonte en escalier. Au repos, l'arrière dépasse de 31 px et le milieu de 16 px ; pointeur en haut à gauche, 47 et 25 px ; en bas à droite, 15 et 7 px. .gds-stack ne déclare pas transform-style: preserve-3d : dans Firefox, un parent ainsi réglé dont l'enfant est transformé y annule le backdrop-filter (mesuré par capture d'écran réelle sur un fond rayé), et les couches restant à Z = 0, il n'apporterait rien. Le repli .gds-solid est posé par le script quand l'utilisateur réduit la transparence ou que le navigateur ignore backdrop-filter ; Safari avant 18 lit la forme -webkit-. Le script parcourt toutes les .gds-scene : plusieurs piles cohabitent, chacune avec ses --px et --py ; retirez les id gdsScene et gdsStack quand vous dupliquez le bloc, il ne s'en sert pas. Une variante plus ancienne de cette pile existe aussi dans la catégorie.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion, le script ignore le pointeur — mesuré dans les trois moteurs, couches immobiles aux deux coins. L'escalier reste visible, la profondeur se lit sans bouger. - Transparence réduite et absence de flou : le script pose
.gds-solidsur la scène quandprefers-reduced-transparency: reducerépond ou quandCSS.supportsne connaît nibackdrop-filterni sa forme préfixée. Mesuré sous émulation dans Chromium : couches pleines (#1b2142,#222a52,#14162a), plus de flou, taches désaturées. Firefox 153 et WebKit 26 ne connaissent pas encore ce réglage de transparence : le repli n'y joue que si le flou manque. - Contraste : le texte blanc de la couche avant tient grâce à ses ombres portées (
text-shadownoir à 40 et 55 %). Sans elles, mesuré sur la couche avant : 2,62:1 en valeur médiane, 2,22:1 sur la zone la plus claire, quand la tache rose passe dessous. Gardez les ombres, ou foncez la couche avant si le texte s'allonge. - Toucher et clavier : la parallaxe ne répond qu'au pointeur qui survole. Au doigt, le glissement fait défiler la page et le navigateur interrompt le suivi ; au clavier, rien ne bouge. Aucun contenu ne dépend du mouvement : les trois couches et leurs textes restent lisibles à l'arrêt. Si les couches arrière portent une information, donnez-lui aussi une place dans le texte de la couche avant ou dans la page.
Compatibilité navigateur
CSS (variables, calc(), translate3d, backdrop-filter) + 1,3 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes amplitudes, même retour à zéro, même arrêt sous mouvement réduit ; le flou de 6 px s'affiche dans les trois, la pile n'utilisant pas preserve-3d (capture d'écran réelle pour Firefox et WebKit, dont les captures automatiques n'affichent jamais backdrop-filter). -webkit-backdrop-filter couvre Safari avant la version 18. Les évènements pointermove existent depuis Chrome 55, Firefox 59 et Safari 13.
Sans backdrop-filter (Firefox avant 103 par exemple), le script pose .gds-solid : trois couches pleines bleu nuit, texte blanc, escalier et parallaxe intacts. Sans JavaScript, les couches restent en escalier au repos, sans parallaxe ni repli automatique. Sans pointeur qui survole (téléphone, tablette), l'escalier fixe suffit à lire les trois plans.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="gds-scene">
<div class="gds-bg">
<span class="gds-orb gds-orb--1"></span> … (3 taches)
</div>
<div class="gds-stack">
<div class="gds-layer gds-layer--back"></div>
<div class="gds-layer gds-layer--mid"></div>
<div class="gds-layer gds-layer--front">
<div><h3>…</h3><p>…</p></div>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Glass Depth Stack, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Amplitudes (CSS — --d sur .gds-layer--back, --mid, --front) |
8 / 16 / 26 px | C'est l'écart entre couches qui crée la profondeur : 4 / 12 / 30 px l'accentue, 6 / 8 / 10 px l'aplatit. Au-delà de 40 px pour l'avant, la couche sort de la scène aux coins. |
Escalier (CSS — --lift) |
−22 % (arrière), −11 % (milieu), en pourcentage de la hauteur de la couche | Les couches dépassent de 31 et 16 px au repos pour 240 px de haut. 0% les recache sous l'avant. Pour un empilement latéral, ajoutez un décalage horizontal dans le premier terme du translate3d. |
Échelle et opacité (CSS — --s, opacity) |
0,82 / 0,91 / 1 et 55 / 75 / 100 % | Des échelles plus proches (0,94 / 0,97) donnent une pile de cartes ; plus écartées (0,7 / 0,85), un tunnel. Une opacité trop basse rend la couche arrière invisible sur un fond sombre. |
Flou par couche (CSS — --gds-blur) |
6px pour les trois couches | Les trois couches floutent pareil. Pour un flou croissant vers l'avant : --gds-blur: 3px sur l'arrière, 6px sur le milieu, 12px sur l'avant ; chaque couche floute aussi celles qui sont derrière elle. |
Teinte des couches (CSS — background de chaque .gds-layer--…) |
même dégradé blanc de 16 % à 5 % | Une teinte par couche aide à les nommer : linear-gradient(135deg, rgba(255,120,110,.22), rgba(200,60,60,.08)) pour une couche rouge. Gardez une opacité sous 35 % pour que le flou reste visible. |
Sensibilité (JS — var amp = 1) |
1 : couches à pleine amplitude au bord de la scène | 0,5 divise le mouvement par deux. Pour suivre le pointeur au lieu de s'y opposer, retirez le signe moins devant nx et ny. |
Fluidité (CSS — transition: transform .12s ease-out) |
0,12 s | 0,3 s donne une pile qui flotte en retard du pointeur, 0 s une pile collée au geste. Sur le retour à zéro (pointerleave), la même durée s'applique. |
FAQ
perspective: 900px, mais la composante Z du translate3d vaut 0 : aucune couche n'avance vers l'écran. La profondeur est une illusion de parallaxe — échelle plus petite et mouvement plus lent pour ce qui est loin —, la même que dans un jeu de plateforme. Pour une vraie 3D, donnez à chaque couche un Z (translate3d(…, …, -60px) pour l'arrière, -30px pour le milieu) et remettez transform-style: preserve-3d sur .gds-stack ; attention, Firefox perd alors tout le flou des couches (mesuré), et Chromium calcule le flou de chaque couche sur ce qui est derrière elle dans le plan, pas en 3D. La parallaxe à plat est le compromis qui marche partout.deviceorientation, qui demande une autorisation sur iOS) et écrivez les mêmes --px / --py entre −1 et 1 — le CSS n'a pas à changer.
