Glass Ripple Touch
Une surface de verre dépoli de 260 × 170 px : chaque appui y dépose trois anneaux qui partent du point exact du doigt ou du clic, décalés de 0,15 s, et s'élargissent de 60 à 180 px en s'effaçant en 1 s — plusieurs doigts à la fois font plusieurs ondes.
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
La surface .lg-ripple-surface est une vitre : fond blanc à 6 %, backdrop-filter: blur(10px) (avec sa forme -webkit-), bordure blanche à 12 %, coins de 16 px, overflow: hidden pour que les ondes ne débordent pas, et un voile indigo → rose à 10 % en ::before. Le libellé « Click anywhere » (12 px, blanc à 50 %) est centré et laisse passer les appuis (pointer-events: none).
Le script écoute pointerdown sur chaque [data-ripple-surface]. À chaque appui, il crée trois div.lg-ripple-ring de 60 × 60 px centrés sur le point touché (position relative à la surface), avec des délais de 0, 0,15 et 0,3 s, et les retire 1,2 s plus tard. L'animation lgRippleExpand (1 s, ease-out, forwards) les fait passer de scale(0) à scale(3) — 180 px de diamètre — pendant que l'opacité tombe à 0 et que la bordure de 2 px passe du violet à 60 % au transparent. Mesuré 550 ms après l'appui dans Chromium 151 : échelles 2,25 / 1,77 / 1,19 et opacités 0,25 / 0,41 / 0,60 (2,23 / 1,74 / 1,17 dans Firefox 153) ; à 1 350 ms, plus aucun anneau dans la page.
Deux choix rendent le verre lisible et l'onde fiable. La surface est posée dans un décor .lg-ripple-backdrop — trois disques aux bords nets (indigo, rose, cyan), des hachures fines et un fond nuit — qui dépasse sous ses bords : on voit les disques nets autour, flous derrière. Sur un fond uni, un flou de 10 px n'aurait rien à flouter et le verre se réduirait à un rectangle gris ; remplacez ce décor par votre image. Et l'écouteur est pointerdown, pas click : mesuré dans Chromium en tactile, deux doigts posés ensemble ne produisent aucun clic, donc aucune onde, alors qu'avec pointerdown chaque doigt a la sienne (2 appuis, 6 anneaux), et l'onde part dès le contact au lieu d'attendre que le doigt se lève.
Accessibilité
- Retour visuel, pas commande : la surface est un
div, sans rôle ni focus clavier (mesuré : Tab ne s'y arrête pas). L'onde dit « j'ai senti votre doigt » ; si l'appui déclenche une action (choisir une zone, lancer un jeu), cette action doit exister aussi sur un vrai<button>ou un lien, posé dans la surface — l'onde vient en plus. - Mouvement : l'onde ne se produit qu'à l'appui, mais aucune règle
prefers-reduced-motionn'est prévue. Ajoutez@media (prefers-reduced-motion: reduce) { .lg-ripple-ring { animation-duration: .4s; animation-delay: 0s !important } }pour une seule onde courte, oudisplay: nonepour aucune. - Contraste : les anneaux violets à 60 % → 0 % sont un ornement ; sur un fond turquoise ou clair ils disparaissent presque (voir les scènes, passées en blanc). Le libellé en blanc à 50 % mesure 5,2:1 sur la surface posée sur fond sombre ; sur votre image, vérifiez-le.
- Appui accidentel : avec
pointerdown, le début d'un défilement au doigt sur la surface déclenche aussi une onde. Sans conséquence tant que l'onde reste un retour visuel ; si la surface déclenche une action, faites-la au relâchement (clicksur le bouton), pas à l'appui.
Compatibilité navigateur
JS : pointerdown, getBoundingClientRect, createElement, setTimeout. CSS : animation transform + opacity, backdrop-filter (et -webkit-), overflow: hidden. Zéro dépendance. Mesuré dans Chromium 151 et Firefox 153 (souris) : trois anneaux, mêmes échelles à 2 % près, retirés à 1,2 s, aucune erreur ; dans Chromium en tactile émulé : un anneau triple par doigt, deux doigts simultanés compris.
Sans backdrop-filter (Firefox avant 103), la surface reste translucide, sans flou ; les ondes fonctionnent. Sans événements pointeur (Safari avant 13), aucune onde n'apparaît : remplacez pointerdown par click si vous devez couvrir ces versions.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-ripple-backdrop">
<div class="lg-ripple-surface" data-ripple-surface="">
<span class="lg-ripple-label">…</span>
<!-- div.lg-ripple-ring × 3 par appui, ajoutés puis retirés par le script -->
</div>
</div>
</div>Le code complet HTML + CSS + JS de Glass Ripple Touch, 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 |
|---|---|---|
Couleur des ondes (CSS — @keyframes lgRippleExpand, border-color) |
violet rgba(139,92,246,.6) → transparent |
La couleur est dans l'animation, pas dans .lg-ripple-ring : une règle border-color sur l'anneau ne change rien. Modifiez les deux étapes de la @keyframes — blanc rgba(255,255,255,.95) → .2 sur un fond coloré ou de l'eau. |
Taille et portée (JS — o.style.width = "60px" ; CSS — scale(3)) |
départ 60 px, arrivée 180 px | La taille de départ est écrite par le script (avec le décalage − 30 pour centrer) ; la portée est le scale de fin. scale(5) fait traverser une grande surface ; pour des doigts d'enfant, 80 px au départ. |
Nombre et rythme des anneaux (JS — c < 3, .15 * c ; retrait à 1200 ms) |
3 anneaux, 0,15 s d'écart, retirés à 1,2 s | 2 anneaux à 0,25 s d'écart donnent une onde plus lente, 4 à 0,1 s une vibration. Gardez le retrait supérieur à durée + dernier délai (1 s + 0,3 s) : à 1,2 s, le troisième anneau est retiré juste avant la fin de son effacement, sans que cela se voie. |
Flou et teinte du verre (CSS — .lg-ripple-surface, ::before) |
flou 10 px, blanc 6 %, voile indigo → rose à 10 % | 1-2 px quand le fond doit rester lisible (carte, plan), 10-16 px pour une simple matière. Le voile du ::before teinte la vitre : passez-le à vos couleurs ou retirez-le. |
Décor derrière le verre (CSS — .lg-ripple-backdrop) |
trois disques nets, hachures, fond nuit, 28 × 36 px de marge autour de la surface | Il est là pour que le flou se voie dans la démo. Sur votre page, supprimez le div et sa règle, et posez la surface sur votre image ou votre contenu. |
Événement déclencheur (JS — "pointerdown") |
à l'appui, un doigt = une onde | "click" attend le relâchement et ignore les appuis à plusieurs doigts (mesuré : 0 onde) ; utile seulement pour couvrir Safari avant 13. |
FAQ
@keyframes lgRippleExpand (une règle border-color sur .lg-ripple-ring est écrasée par l'animation). Et si la surface est sur un fond uni, le verre lui-même ne se voit pas : gardez le décor fourni ou posez la surface sur une image.pointerdown, que le navigateur envoie pour chaque doigt. Mesuré dans Chromium en tactile : deux doigts posés ensemble, deux ondes triples. Un écouteur click ne produirait rien dans ce cas — le navigateur n'envoie pas de clic pour un appui à plusieurs doigts. Sur une borne ou une table tactile, vérifiez aussi que le système d'exploitation ne transforme pas deux doigts en geste de zoom : touch-action: none sur la surface l'en empêche.
