Rain on Glass
Une vitre légèrement dépolie (flou de 3 px) devant une ville au crépuscule : une goutte naît en haut toutes les 0,4 à 1,2 s, tombe en 3 à 7 s en accélérant, dérive de quelques pixels et laisse une traînée de 40 px — cinq à neuf gouttes en même temps, mesuré dans les trois moteurs.
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 scène .lg-rain-scene (260 × 180 px, coins de 14 px, ciel en dégradé du bleu nuit #1e3a5f au bleu clair #6b9fd4) contient une silhouette de ville — neuf immeubles de 10 à 22 px de large, en bleu ardoise à 60 % — et, devant elle, une vitre .lg-rain-glass qui couvre toute la scène avec backdrop-filter: blur(3px) (et -webkit-) au niveau 1 : la ville est vue à travers un verre embué. Les gouttes et leurs traînées sont au niveau 2, sur la vitre, donc nettes.
Le script démarre la pluie quand 30 % de la scène entrent dans l'écran (IntersectionObserver, une seule fois). Il crée alors une goutte, puis la suivante 0,4 à 1,2 s plus tard, sans fin. Chaque goutte est un div de 4 à 10 px de large et 1,3 fois plus haut, en forme de larme (border-radius: 50%/60% 60% 40% 40%), remplie d'un dégradé radial blanc → bleu pâle → transparent avec un reflet intérieur. Elle part de 10 px au-dessus du bord et descend jusqu'à 10 px sous le bas en 3 à 7 s, sur une courbe au carré — lente au départ, rapide à la fin — en dérivant latéralement de ±15 px au plus (sin(π·h)). Sa traînée (2 px de large, jusqu'à 40 px de long) la suit et s'efface à mesure qu'elle descend. Arrivées en bas, goutte et traînée sont retirées de la page.
Mesuré toutes les 2 s après le démarrage : 3, 6, 7, 9, 8, 6 gouttes dans Chromium 151 ; 4, 7, 6, 6, 7, 6 dans Firefox 153 ; 3, 6, 5, 6, 6, 7 dans WebKit 26.5 — le régime s'installe en 3 à 4 s et tourne autour de six gouttes. Aucune erreur console, aucune dépendance. Sa seule faiblesse mesurée est que la pluie ne s'arrête jamais, même hors de l'écran (6 gouttes encore actives 3 s après avoir fait défiler la scène hors de vue) — voir l'accessibilité et la FAQ pour la mettre en pause.
Accessibilité
- Animation sans fin : la pluie tourne tant que la page est ouverte, et rien n'est prévu pour
prefers-reduced-motionni pour la mettre en pause. Une animation automatique de plus de 5 s doit pouvoir s'arrêter (WCAG 2.2.2). Le plus simple : ne pas la démarrer quand l'utilisateur a demandé moins de mouvement — dans le script, remplaceza.observe(e)parmatchMedia('(prefers-reduced-motion: reduce)').matches || a.observe(e); la vitre et la ville restent, sèches. - Décor, pas information : les gouttes ne disent rien à un lecteur d'écran, et ne doivent rien dire seules. Ajoutez
aria-hidden="true"sur la scène, et donnez le message en texte (« Risque d'averses de 10 h à 12 h », « Match reporté ») — dans les trois scènes de cette page, le texte est posé au-dessus ou à côté de la vitre, jamais derrière. - Texte sur la vitre : un texte placé dans la scène sans
z-indexpasse sous la vitre et sort flou. Placez-le au-dessus (position: absolute; z-index: 3) ou hors de la scène ; sur le ciel, gardez un fond sombre derrière les lettres, les gouttes blanches passent dessus. - Hors écran : la boucle continue quand la scène n'est plus visible (mesuré). Sans effet pour l'utilisateur, mais du travail inutile sur un téléphone — voir la FAQ pour l'arrêter hors de vue.
Compatibilité navigateur
JS : IntersectionObserver, requestAnimationFrame, setTimeout, createElement. CSS : backdrop-filter (et -webkit-), dégradés radiaux, border-radius elliptique. Zéro dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même cadence et même nombre de gouttes à une ou deux près, ville floutée à 3 px dans les trois, aucune erreur console.
Sans backdrop-filter (Firefox avant 103), la ville est nette derrière la vitre : les gouttes tombent normalement, seul l'effet de verre embué disparaît. Sans IntersectionObserver (Safari avant 12.1), la pluie ne démarre jamais : la scène reste une ville au crépuscule, sèche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-rain-scene" data-rain-scene="">
<div class="lg-rain-glass"></div>
<div class="lg-rain-city">
<div class="lg-rain-building" style="width:12px;height:35px"></div>
…
</div>
<!-- div.lg-raindrop + div.lg-raindrop-trail, ajoutés puis retirés par le script -->
</div>
</div>Le code complet HTML + CSS + JS de Rain on Glass, 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 |
|---|---|---|
Taille des gouttes (JS — n = 4 + 6 * Math.random() ; ou CSS — .lg-raindrop { transform: scale(2) }) |
4 à 10 px de large | Sur une grande scène, les gouttes d'origine sont à peine visibles. Changez la formule (8 + 10 * Math.random()) ou agrandissez-les en CSS : le script n'écrit pas transform, un scale s'applique donc tel quel (avec transform-origin: 50% 100%). |
Cadence (JS — setTimeout(t, 400 + 800 * Math.random())) |
une goutte toutes les 0,4 à 1,2 s, environ six en même temps | 150 + 300 * Math.random() pour une averse (une quinzaine de gouttes), 1500 + 2000 * Math.random() pour une bruine éparse. |
Vitesse de chute (JS — o = 3e3 + 4e3 * Math.random()) |
3 à 7 s pour traverser la vitre, en accélérant | 1500 + 1500 * Math.random() pour une pluie battante. La courbe au carré (h * h) donne l'accélération ; h seul ferait une chute à vitesse constante. |
Dérive et traînée (JS — l = 30 * (Math.random() - .5), Math.min(40, …)) |
±15 px de dérive, traînée jusqu'à 40 px | 0 pour des gouttes qui tombent droit, 60 pour une vitre battue par le vent. La longueur maximale de traînée se règle dans Math.min(40, p - r). |
Buée de la vitre (CSS — .lg-rain-glass { backdrop-filter: blur(3px) }) |
3 px | 1 px laisse la ville presque nette, 8 px en fait des taches de lumière. Ajoutez background: rgba(255,255,255,.06) à la vitre pour un verre plus laiteux. |
Paysage derrière la vitre (HTML — .lg-rain-city et les .lg-rain-building en ligne) |
neuf immeubles en bleu ardoise sur un ciel dégradé | Remplacez-les par n'importe quel contenu ou par une image (<img> en position: absolute; inset: 0; object-fit: cover dans la scène, avant la vitre). Tout ce qui est sous la vitre est flouté, tout ce qui est au-dessus reste net. |
FAQ
function (x) { v = x[0].isIntersecting; v && !n && (n = !0, t()) }, retirez a.disconnect(), déclarez var v = !1 juste avant function t(), et en tête de t() ajoutez if (!v) { n = !1; return } : la boucle s'arrête dès que la scène sort de l'écran et repart quand elle revient (les gouttes en cours finissent leur chute). Mesuré avec cette modification : 5 gouttes en régime, 0 après 7,5 s hors de vue, 4 trois secondes après le retour à l'écran — contre 6 gouttes toujours actives hors de vue avec le code d'origine.div.[data-rain-scene], chacune a son propre observateur et sa propre boucle, et démarre quand elle arrive à l'écran. Comptez environ six gouttes, donc une douzaine d'éléments, par scène ; chaque goutte modifie sa position à chaque image, ce qui reste léger pour deux ou trois scènes.
