Glass Shatter Reveal
Une vitre dépolie en six éclats triangulaires (clip-path) qui, au clic, au toucher, à Entrée ou à Espace, s'envolent en 3D — perspective de 800 px, jusqu'à 86 px de côté et 70 px vers l'écran, rotation de 18 à 26° — et s'effacent en 0,7 s pour révéler le contenu caché dessous ; un second geste reforme la vitre. 0,8 Ko de JavaScript.
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 (.gsr-scene, dégradé radial violet) porte une vitre de min(72%, 320px) au format 4/3 (.gsr-stage). Dessous, le contenu caché .gsr-reveal : coins de 20 px, dégradé violet → rose, titre et texte blancs. Dessus, .gsr-glass, un div en role="button", tabindex="0" et aria-pressed, qui contient six .gsr-shard plein cadre découpés par clip-path: polygon() en six triangles qui se rejoignent au centre — deux sur le bord haut, un à droite, deux en bas, un à gauche. Chaque éclat est en verre : dégradé blanc de 24 % à 6 %, liseré intérieur, backdrop-filter: blur(9px) saturate(160%). Vitre intacte, le contenu dessous n'est qu'une tache colorée floue ; une pastille « Cliquez pour briser » est posée en bas.
Le script, un écouteur par vitre de la page, bascule la classe .gsr-shattered au clic et sur Entrée ou Espace (preventDefault évite le défilement), et recopie l'état dans aria-pressed. La classe donne à chaque éclat sa trajectoire, perspective(800px) translate3d(x, y, z) rotate(a) : les deux éclats du haut partent à ±34 px et −72 px en montant de 70 px vers l'écran, ceux des côtés à ±86 px, ceux du bas à ±40 px et +74 px, avec des rotations de 18 à 26° en sens opposés ; et une opacité à 0. Transition de 0,7 s en cubic-bezier(.2, .7, .2, 1) : départ rapide, fin lente. Mesuré à 250 ms : éclats à environ 85 % de leur course et à 38-42 % d'opacité, dans Chromium, Firefox et WebKit ; à 1 s, tous à opacité 0, aria-pressed="true". Un second geste retire la classe et les éclats reviennent se souder sur le même chemin.
Pourquoi la profondeur passe par perspective(800px) dans le transform de chaque éclat, et pas par transform-style: preserve-3d sur leurs parents : dans Firefox, sous la perspective de la scène, un parent en preserve-3d annule le backdrop-filter des éclats (mesuré par capture d'écran réelle sur un fond rayé : contenu caché parfaitement lisible). Avec une perspective par éclat, le rendu est le même dans Chromium et le dépoli tient partout. En mouvement réduit, les éclats s'effacent sur place en 0,3 s au lieu d'être projetés. Le script ajoute .gsr-solid pour un utilisateur qui réduit la transparence ou un navigateur sans backdrop-filter, et le flou est doublé en -webkit-backdrop-filter pour Safari avant 18. Chaque .gsr-glass a son propre état : plusieurs vitres cohabitent dans une page (supprimez l'id gsrScene en dupliquant le bloc). Une variante plus ancienne de cette vitre brisée existe aussi dans la catégorie.
Accessibilité
- Clavier : la vitre est atteignable au Tab (
tabindex="0"), entourée d'un contour blanc de 2 px à 3 px d'écart au focus clavier, et réagit à Entrée et à Espace — mesuré dans Firefox et WebKit : Tab donne le focus, Entrée brise, Espace reforme.aria-pressedannonce l'état. Le libelléaria-label(« Briser la vitre pour révéler ») et la pastille sont en français dans le code : traduisez-les avec votre page. Avec plusieurs vitres, donnez à chacune unaria-labelqui dit ce qu'elle cache. - Contenu révélé non cliquable : une fois brisée, la vitre reste au-dessus, invisible — mesuré, le point central de la scène renvoie toujours
.gsr-glass. Un lien ou un bouton placé dans le contenu révélé ne reçoit pas le clic, qui reforme la vitre. Pour un contenu à cliquer, voir la FAQ. Pour un lecteur d'écran, le contenu caché est lu même vitre intacte : il n'est masqué qu'à l'œil. Si la révélation doit rester une surprise, ajoutezaria-hidden="true"au contenu et retirez-le au bris. - Mouvement réduit : sous
prefers-reduced-motion, les éclats ne bougent plus, ils s'effacent sur place en 0,3 s — mesuré, transform nul et opacité 0,02 à 250 ms, 0 à 1 s. - Transparence réduite et contraste : le script pose
.gsr-solidquandprefers-reduced-transparency: reducerépond (Chromium seulement à ce jour) ou sansbackdrop-filter: éclats pleins#14162a, le contenu est alors totalement caché jusqu'au bris. Le texte blanc du contenu révélé mesure 5,7:1 sur le violet de départ et 4,6:1 sur le rose d'arrivée du dégradé : il passe le seuil de 4,5:1 sur toute sa surface.
Compatibilité navigateur
CSS (clip-path: polygon(), perspective(), translate3d, backdrop-filter, transitions) + 0,8 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes trajectoires, même timing, mêmes touches. Le dépoli des éclats s'affiche dans les trois, sans preserve-3d (capture d'écran réelle pour Firefox et WebKit, dont les captures automatiques n'affichent jamais backdrop-filter). clip-path: polygon() existe sans préfixe depuis Chrome 55, Firefox 54 et Safari 13.1.
Sans backdrop-filter, le script pose .gsr-solid : éclats pleins bleu nuit qui cachent entièrement le contenu, bris et reformage intacts. Sans clip-path, les six éclats deviennent six rectangles superposés : la vitre cache toujours, mais se brise en six plaques entières. Sans JavaScript, la vitre reste intacte et le contenu dessous n'est jamais révélé — gardez l'information essentielle (un numéro d'urgence, par exemple) aussi ailleurs dans la page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="gsr-scene">
<div class="gsr-stage">
<div class="gsr-reveal">…contenu caché…</div>
<div class="gsr-glass" role="button" tabindex="0" aria-pressed="false" aria-label="…">
<span class="gsr-shard"></span> … (6 éclats)
<span class="gsr-hint">…</span>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Glass Shatter Reveal, 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 |
|---|---|---|
Trajectoires (CSS — .gsr-glass.gsr-shattered .gsr-shard:nth-child(1) à (6)) |
perspective(800px) translate3d(±34 à ±86 px, −72 à +74 px, 50 à 70 px) rotate(±18 à ±26°) | Doublez les distances pour une explosion qui sort de la scène ; un z plus grand (150 px) fait venir les éclats vers l'écran. Gardez perspective(800px) en tête de chaque transform : c'est lui qui donne la profondeur. |
Durée et rythme (CSS — transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s) |
0,7 s, départ rapide | 1,2 s pour une révélation solennelle, 0,4 s pour un bris sec. Décalez les éclats avec transition-delay sur chaque :nth-child (0, 40, 80 ms…) pour une cassure qui se propage. |
Découpe (CSS — clip-path: polygon(…) sur chaque éclat) |
6 triangles réunis au centre | Déplacez le point commun (50% 50%) vers 38% 62% pour un impact excentré. Pour plus d'éclats, ajoutez des span avec leur polygone et leur trajectoire. |
Dépoli (CSS — backdrop-filter: blur(9px) saturate(160%)) |
9 px | 16 px ou plus pour qu'aucune forme du contenu caché ne se devine ; 4 px pour un teasing. Modifiez la valeur avec et sans préfixe. |
Pastille d'invitation (HTML — .gsr-hint) |
« Cliquez pour briser », s'efface au bris | Réécrivez-la selon l'appareil (« Touchez ») et ajoutez white-space: nowrap si le texte s'allonge. Supprimez-la si un titre au-dessus de la vitre invite déjà au geste. |
Contenu révélé (HTML + CSS — .gsr-reveal) |
dégradé violet → rose, titre et texte blancs | N'importe quel HTML : image, prix, code promo. Le contenu prend toute la vitre ; ajustez son padding et sa mise en page (display: flex pour une image et un texte côte à côte). |
Bris sans retour (JS — e.classList.toggle("gsr-shattered")) |
chaque geste bascule entre brisé et intact | Remplacez toggle par add pour une vitre qui ne se reforme pas (code promo, déblocage). |
FAQ
.gsr-glass. Ajoutez .gsr-glass.gsr-shattered { pointer-events: none } : les clics traversent jusqu'au contenu, le lien tel: ou le bouton fonctionne. Mais la vitre ne peut plus être reformée au clic ; si vous voulez garder ce retour, ajoutez dans le contenu un bouton « Remettre la vitre » qui retire la classe gsr-shattered et remet aria-pressed à false.preserve-3d, sous une perspective, n'applique plus son backdrop-filter — mesuré cas par cas sur un fond rayé, la vitre laisse alors lire le contenu caché. Les éclats ne se croisent pas en profondeur, ils n'ont donc pas besoin d'un espace 3D commun : perspective(800px) dans le transform de chacun donne le même rendu (même distance, même point de fuite au centre de la vitre) et le flou reste actif partout.div qui ne répond qu'au clic (ni Tab, ni état annoncé, ni réglage de mouvement réduit), sans rien derrière la vitre. Glass Shatter Reveal brise la sienne en six éclats aux trajectoires écrites dans le CSS pour révéler un contenu (.gsr-reveal), se manie au clavier (Tab, Entrée, Espace) avec aria-pressed, et respecte la réduction des animations et de la transparence. Pour cacher puis montrer une information, prenez Glass Shatter Reveal ; pour un simple jeu visuel au clic, l'autre suffit.
