Floating Elements
Cinq formes de verre translucide (un carré, un rond, une pilule, un petit carré, une étiquette) éparpillées sur tout le cadre dérivent chacune sur sa propre boucle, de 5,5 à 9 s, avec un flou d'arrière-plan. Aucune 3D ni interaction : un mouvement à plat, jamais synchrone. CSS pur, zéro JavaScript, 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. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0023-root (fond #0a0a0f, 300 px de haut au minimum) contient .floating-container : toute la largeur, 250 px de haut, overflow: hidden pour que rien ne déborde. Les cinq .floating-el y sont posées en position: absolute, en pourcentages, donc elles gardent leur répartition quand le cadre s'élargit : .float-1 carré indigo de 80 px en haut à gauche, .float-2 rond rose de 60 px au centre, .float-3 pilule verte de 100 × 50 px en haut à droite, .float-4 carré ambre de 50 px en bas à gauche, .float-5 étiquette violette de 70 × 40 px en bas à droite. Chacune a un fond coloré à 60 % d'opacité, backdrop-filter: blur(10px) qui floute ce qui passe derrière, une ombre douce et un texte blanc de 0,75 rem.
Chaque forme a sa propre animation, ease-in-out, sans fin : floatDrift1 (6 s) promène le carré jusqu'à 35 px vers le haut en le tournant de −3 à 5° ; floatDrift2 (8 s) déplace le rond de 25 px en le gonflant de ×0,95 à ×1,05 ; floatDrift3 (7 s) descend la pilule de 20 px en l'inclinant de −6° ; floatDrift4 (9 s) monte le petit carré de 30 px en le tournant de 10° ; floatDrift5 (5,5 s) glisse l'étiquette en diagonale de 20 px. Ce sont des translations, rotations et zooms à plat : l'effet est rangé dans la catégorie 3D mais n'utilise ni perspective ni profondeur. Les durées différentes empêchent toute synchronisation : la composition d'ensemble ne se répète qu'au bout de 5 544 s, plus d'une heure et demie.
Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (pas de 3D, donc le moteur de test est fiable ici) : même dérive, flou présent dans les trois, environ 7 % des pixels du bloc qui changent en 0,8 s, deux copies indépendantes, 0 erreur. Le flou d'arrière-plan a un coût : il ne se voit que s'il y a quelque chose derrière (sur le fond uni de la démo, il ne change rien), et il recalcule la zone sous chaque forme à chaque image. Cinq petites formes restent légères ; une vingtaine de grandes sur une photo pleine page se ressentent sur un téléphone modeste.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0023-rootretire les cinq animations : les formes restent à leur place de départ. Mesuré dans Chromium, Firefox et WebKit : 0 animation en cours, 0 % des pixels qui changent en 0,8 s (7,4 % sans la préférence). - Mouvement continu : cinq formes bougent sans fin sur tout le cadre ; en fond d'une page à lire, prévoyez une pause (WCAG 2.2.2) et gardez le texte principal hors des formes, sur un fond stable, comme le titre du deuxième exemple.
- Contraste : le texte blanc de 12 px est posé sur du verre coloré à 60 % : son contraste dépend de ce qui passe derrière. Sur fond sombre il reste lisible ; sur une photo claire, montez l'opacité des fonds à 80 % ou foncez-les.
- Contenu décoratif : si les formes ne font que décorer, mettez
aria-hidden="true"sur la racine. Les symboles ★ et ♥ sont lus « étoile noire » et « cœur noir » par les lecteurs d'écran : donnez-leur un sens par un texte à côté, comme la légende du premier exemple.
Compatibilité navigateur
CSS (@keyframes de transform à plat, backdrop-filter), zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même dérive (0,3 % d'écart sur l'image fixe), flou d'arrière-plan rendu, arrêt sous mouvement réduit, 0 erreur. backdrop-filter est écrit sans préfixe : les Safari antérieurs à la version 18, qui demandaient -webkit-backdrop-filter, montrent les formes sans flou ; non vérifié sur un vrai Safari.
Sans backdrop-filter, les formes gardent leur fond coloré à 60 % et leur dérive, sans flou derrière. Pour les Safari plus anciens, ajoutez -webkit-backdrop-filter: blur(10px) à côté de la propriété existante.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0023-root">
<div class="floating-container">
<div class="floating-el float-1">Nav</div>
<div class="floating-el float-2">★</div>
<div class="floating-el float-3">Button</div>
<div class="floating-el float-4">♥</div>
<div class="floating-el float-5">Tag</div>
</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 |
|---|---|---|
Positions (CSS — top / left / right / bottom de .float-1 à .float-5) |
en pourcentages du cadre | Gardez des pourcentages pour que la répartition tienne à toutes les largeurs. Laissez 35 px de marge aux bords : c'est le plus grand déplacement des boucles, le conteneur coupe ce qui dépasse. |
Durées (CSS — 6s, 8s, 7s, 9s, 5.5s) |
5,5 à 9 s, toutes différentes | Allongez-les toutes (×1,5) pour un fond plus calme. Gardez-les différentes : des durées égales feraient bouger les formes au même rythme, et l'effet de dérive libre disparaîtrait. |
Amplitude (CSS — @keyframes floatDrift1 à 5) |
jusqu'à 35 px, rotations de 3 à 10° | Divisez les translations par deux pour un fond sous un texte. Le zoom de la forme ronde (×0,95 à ×1,05) peut monter à ×1,1 pour une pulsation. |
Verre (CSS — backdrop-filter et background de .floating-el) |
blur(10px), fonds à 60 % | Le flou n'a d'effet que s'il y a une image ou des couleurs derrière. 4 px garde l'arrière-plan reconnaissable ; 20 px donne un verre dépoli épais. Ajoutez -webkit-backdrop-filter pour les anciens Safari. |
Hauteur du cadre (CSS — height de .floating-container) |
250px | Pour un fond de bandeau, height: 100% et la racine en position: absolute; inset: 0, comme dans les exemples. |
Formes (CSS — width, height, border-radius de chaque .float-n) |
carré 80, rond 60, pilule 100 × 50, carré 50, étiquette 70 × 40 | Élargissez une pilule pour un mot long (120 px pour « Bonne journée »). border-radius: 50% fait un rond, 999px une pilule. |
FAQ
translate, rotate et scale à plat, sans perspective ni profondeur. L'impression de volume vient du verre (flou d'arrière-plan et ombre portée) et des rythmes différents. Pour des tuiles qui s'inclinent vraiment en 3D, voyez Floating Elements 3D (fx-0017).backdrop-filter floute ce qui est derrière la forme. Sur le fond uni #0a0a0f, il n'y a rien à flouter. Posez l'effet sur une photo ou un fond coloré, comme dans les trois exemples, et le verre apparaît..float-6 et floatDrift6, sur une durée encore différente). Le flou coûte à chaque image sur la surface de chaque forme : au-delà d'une dizaine de grandes formes sur un téléphone, baissez le flou ou retirez-le des plus grandes.
