Liquid Simulation
La souris repousse les quinze gouttes DOM : la nappe s'ouvre autour du curseur et se referme doucement au centre quand il quitte la zone (rappel faible). Un filtre SVG goo (flou gaussien + seuil d'alpha) fusionne les gouttes qui se chevauchent en surface homogène. À différencier de la catégorie Liquid (fx-0391–0420) qui utilise canvas ou WebGL.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La technique « goo » repose sur deux primitives SVG appliquées à un conteneur : feGaussianBlur (flou de 8 px) puis feColorMatrix avec un fort contraste sur le canal alpha (0 0 0 18 −7). Cet effet CSS est appliqué à .ls385-sim via filter: url(#uid). L'id du filtre est unique par instance (généré aléatoirement) pour éviter les conflits quand deux copies coexistent dans la même page : uid = 'ls385-goo-' + Math.random().toString(36).slice(2,7).
Les 15 gouttes (div.ls385-drop) sont créées au chargement avec une taille aléatoire (30–70 px) et des positions initiales aléatoires dans le conteneur. À chaque image, chaque goutte subit : une répulsion du curseur (vx −= dx/dist × fo, fo = (110−dist)/110 × 0,45) quand le curseur est à moins de 110 px ; un rappel faible vers le centre (vx += (cx−x) × 0,0006 × f) toujours actif ; un frémissement aléatoire (vx += (rand−0,5) × 0,12) ; et un amortissement (vx *= 0,96^f). Quand le curseur quitte la zone, seul le rappel vers le centre reste actif : les gouttes se rassemblent lentement en masse au centre. Le step est normalisé à 60 fps : f = dt / 16.67. Un IntersectionObserver met la boucle en pause hors écran.
Accessibilité
- Toucher :
touchmoverepousse les gouttes autour du doigt, exactement comme le curseur.touchenddéclenche le retour progressif au centre. - Clavier : l'effet est purement décoratif et ne réagit pas au clavier.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas et les gouttes restent en anneau fixe autour du centre, visibles grâce au filtre goo qui les fond légèrement. - Différence avec la catégorie Liquid : les effets Liquid (fx-0391 à fx-0420) utilisent canvas ou WebGL pour des effets de surface, de métaballs ou de réfraction. Cet effet utilise exclusivement des
divDOM et un filtre SVG, sans aucun pixel dessiné — c'est une simulation visuelle en CSS/DOM, pas un rendu graphique.
Compatibilité navigateur
DOM, CSS et filtre SVG, aucune dépendance. feGaussianBlur et feColorMatrix disponibles dans tous les navigateurs modernes depuis Chrome 8, Firefox 3, Safari 6. filter: url(#id) sur un élément HTML requiert Chrome 18+, Firefox 35+, Safari 9.1+. IntersectionObserver depuis Chrome 51, Firefox 55, Safari 12.1. Non vérifié sur Safari réel ; attendu complet.
Sans JavaScript, les gouttes s'affichent en anneau fixe, avec le filtre goo actif qui les fond légèrement. Sans IntersectionObserver, la boucle tourne aussi hors écran.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0385-root">
<div class="ls385-wrap">
<div class="ls385-sim"></div>
<svg class="ls385-svg" width="0" height="0" aria-hidden="true" focusable="false">
<filter>
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
</filter>
</svg>
<span class="ls385-label" aria-hidden="true">Survolez pour fusionner les gouttes</span>
</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 |
|---|---|---|
Nombre de gouttes (JS — boucle for(var i=0;i<15;i++)) |
15 | 8 donne un blob compact peu défini ; 25 une surface plus lisse et plus riche. Au-delà de 30, le filtre goo devient lent sur mobile. |
Rayon d'influence du curseur (JS — dist < 110) |
110 px | 150 px agrandit la zone de répulsion et crée une ouverture plus ample ; 70 px ne répond qu'au contact proche du curseur. |
Force de répulsion (JS — facteur 0,45) |
0,45 | 0,7 donne une fuite très vive et des gouttes qui jaillissent ; 0,2 une ouverture progressive et lente. |
Rappel vers le centre (JS — (cx−x) × 0,0006) |
0,0006 | 0,002 ramène les gouttes plus vite quand le curseur quitte la zone ; 0,0001 les laisse dériver longtemps avant de se regrouper. |
Flou SVG (HTML — stdDeviation="8") |
8 | 12 donne une fusion plus douce et un contour plus flou ; 4 des contours nets mais une fusion visible seulement au contact. |
FAQ
div DOM et un filtre SVG : aucun pixel n'est dessiné, tout est CSS et DOM. Il est plus léger mais moins réaliste, et son rendu change si filter: url() sur HTML n'est pas pris en charge (Safari < 9.1).id sur leurs filtres SVG, ce qui est invalide en HTML (les ID doivent être uniques). Le navigateur ne sait plus lequel utiliser et peut appliquer le filtre de la première copie aux deux, ou ne l'appliquer à aucune. L'ID aléatoire résout ce conflit sans avoir à numéroter les instances.background de chaque div.ls385-drop est une propriété CSS animable. Utilisez une @keyframes sur chaque goutte avec un délai décalé (animation-delay) pour un arc-en-ciel qui tourne ; ou changez la couleur depuis le JS à chaque image pour suivre le déplacement.
