Mercury Drops
Quatre sphères chromées de 50 à 80 px — dégradé gris à 135°, ombres internes, reflet blanc — sautent de 30 px en s'étirant, retombent en s'écrasant, rebondissent de 15 px puis se posent, en vague décalée de 0,2 s sur une boucle de 2 s : du métal dur et poli en CSS pur, posé immobile si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le conteneur .mercury-container remplit la racine .fx-0397-root (300 px de haut, dégradé bleu nuit #1a1a2e → #0f0f1a) et aligne quatre .mercury-drop au centre, espacées de 20 px. Chaque sphère est un simple div rond ; le métal tient en trois couches. Un dégradé linéaire à 135° va du gris très clair #e8e8e8 au presque noir #2a2a2a en passant par #a0a0a0 et #4a4a4a : la lumière vient d'en haut à gauche. Deux ombres internes creusent le volume (noire à 50 % en bas à droite, blanche à 30 % en haut à gauche) et une ombre portée de 30 px pose la sphère. Enfin le pseudo-élément ::before, un dégradé radial blanc à 80 % de 30 % de la taille, placé à 10 % du haut et 15 % de la gauche, fait le reflet net qui dit « poli ».
Le rebond est une seule animation, mercuryBounce, de 2 s en ease-in-out. À 30 % de la boucle, la sphère est 30 px plus haut, étirée (×0,9 en largeur, ×1,1 en hauteur) ; à 50 %, elle touche le sol écrasée (×1,1 / ×0,9) ; à 70 %, elle rebondit de 15 px, encore un peu étirée ; elle se pose ensuite jusqu'à la boucle suivante. Les quatre sphères ont des tailles différentes (60, 80, 60 et 50 px) et partent avec 0, 0,2, 0,4 et 0,6 s de retard : la vague court de gauche à droite. L'écrasement se fait autour du centre de la sphère, pas de son point de contact : au sol, le bas de la sphère remonte de quelques pixels au lieu de s'aplatir contre lui.
Seule la propriété transform est animée : le navigateur confie le mouvement au compositeur et ne repeint ni les dégradés ni les ombres. Mesuré dans Chromium 151 sur 3 s d'animation : 0 ms de peinture et de rastérisation, 0,42 ms de composition par image. Le comportement est le même dans Firefox 153 et WebKit 26 (7 % des pixels du cadre changent en 500 ms dans les trois). Le conteneur s'étire sur toute la hauteur de la racine (align-self: stretch) : son dégradé couvre le cadre entier.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0397-rootretire l'animation : les quatre sphères restent posées côte à côte, avec leurs reflets et leurs ombres. Mesuré : 0 % des pixels changent en 500 ms dans Chromium, Firefox et WebKit. - Contenu décoratif : les sphères sont des
divvides, sans texte ni rôle, ignorées par les lecteurs d'écran. Si elles représentent quelque chose (quatre diamètres, quatre bijoux), écrivez-le sous elles, comme les étiquettes des scènes ci-dessus. - Contraste : le haut éclairé de la sphère (
#e8e8e8) mesure 13,9:1 sur le fond#1a1a2eet porte la forme ; le bas, presque noir (#2a2a2a), se fond dans le fond (1,2:1), c'est voulu pour l'effet de volume. Sur un fond clair, c'est l'inverse : le bas sombre dessine le contour. - Rythme : une boucle de 2 s, sans clignotement ; le saut le plus haut fait 30 px.
Compatibilité navigateur
CSS pur : dégradés linéaire et radial, box-shadow intérieures et extérieure, animation de transform, pseudo-élément ::before. Zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même rebond, même vague, même arrêt sous mouvement réduit ; animation confiée au compositeur (0 ms de peinture mesurée dans Chromium).
Sans animations CSS, les quatre sphères restent posées en ligne, avec leurs reflets : l'image métallique tient sans le mouvement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0397-root">
<div class="mercury-container">
<div class="mercury-drop"></div> … (4 sphères)
</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 |
|---|---|---|
Tailles (CSS — .mercury-drop et :nth-child(2), :nth-child(4)) |
60, 80, 60, 50 px | Chaque sphère peut avoir sa taille ; le reflet et les ombres internes suivent (ils sont en pourcentages ou flous assez larges). Sous 30 px, réduisez les ombres internes (20px → 10px) pour garder le volume. |
Métal (CSS — linear-gradient(135deg, #e8e8e8 0, #a0a0a0 30%, #4a4a4a 70%, #2a2a2a 100%)) |
acier poli | Or : #fff4c2, #e0b84a, #8a6418, #4a3308. Cuivre : #ffd2b8, #d0805a, #7a3a22, #3d1a0e. Gardez l'ordre clair → sombre pour la lumière en haut à gauche. |
Hauteur du saut (CSS — -30px et -15px de mercuryBounce) |
30 px, rebond de 15 px | Doublez les deux pour des balles plus vives ; gardez le rebond à la moitié du saut pour que la chute paraisse amortie. Laissez de la place au-dessus : le saut sort du conteneur s'il est trop bas. |
Écrasement (CSS — scaleX(1.1) scaleY(.9) à 50 %) |
±10 % | ±20 % pour une balle molle, ±4 % pour du métal très dur. Ajoutez transform-origin: 50% 100% sur .mercury-drop pour que l'écrasement parte du sol plutôt que du centre. |
Vague (CSS — animation-delay 0 / .2 / .4 / .6 s, durée 2s) |
0,2 s d'écart, boucle de 2 s | Des écarts de 0,5 s donnent des boules lancées l'une après l'autre ; 0 s, un saut à l'unisson. |
Fond et espacement (CSS — .mercury-container) |
#1a1a2e → #0f0f1a, écart de 20 px, sphères centrées | align-items: flex-end pose les sphères au bas du conteneur, sur un sol ; background: none les met sur votre propre fond. |
FAQ
scale part par défaut du centre de l'élément : en s'écrasant de 10 %, la sphère perd de la hauteur en haut et en bas, son point le plus bas remonte de quelques pixels. Ajoutez transform-origin: 50% 100% à .mercury-drop : l'écrasement part alors du point de contact et la sphère reste collée au sol.transform bouge : le navigateur garde les dégradés et les ombres déjà peints et se contente de les déplacer. Mesuré dans Chromium sur 3 s : aucune peinture, aucune rastérisation, 0,42 ms de composition par image. N'animez pas box-shadow ou width à la place : ce sont eux qui obligeraient à repeindre.
