Dust Motes
Dix particules de poussière dorée dérivent dans un rayon de lumière oblique — animation purement CSS, sans JavaScript, par stagger de durées et délais pour un mouvement organique.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur trois @keyframes CSS (dustFloat1, dustFloat2, dustFloat3) appliqués à dix <div class="dust-mote"> circulaires (1–3 px, border-radius:50%). Chaque keyframe définit 4 points intermédiaires (0 %, 25 %, 50 %, 75 %) avec des translations X/Y décalées (±3–8 px horizontalement, −5 à −30 px verticalement) et des variations d'opacité (0,3–0,9). Le timing ease-in-out ralentit aux extrémités de chaque segment, imitant l'inertie réelle de particules en suspension dans l'air.
La diversité des trajectoires provient uniquement du CSS : chaque règle .dust-mote:nth-child(N) assigne une durée différente (6–10 s) et un délai décalé (0–3 s). Cette désynchronisation brise le motif régulier et donne l'illusion de mouvement indépendant. Aucune valeur n'est tirée aléatoirement à l'exécution — la variété est intégralement bâtie dans les règles statiques.
Le rayon de lumière est un <div class="dust-beam"> positionné en absolu (top:−20%; right:10%; width:120px; height:140%) avec un linear-gradient de rgba(255,220,150,.08) vers transparent, tourné de 15° depuis transform-origin:right top. Le contraste entre ce voile doré et le fond sombre (#1a1a2e → #16213e) produit l'effet de lumière qui découpe l'obscurité.
Sans JavaScript, sans requestAnimationFrame, sans canvas, le moteur d'animation du navigateur gère tout via la couche de composition GPU. Les motes sont en position:absolute avec des dimensions fixes en px : elles n'affectent pas le layout et ne déclenchent aucun reflow. La performance est négligeable même sur mobile.
Accessibilité
- Pas de
prefers-reduced-motiondans le code livré : les animations CSS tournent quelle que soit la préférence système. Pour une intégration accessible, ajoutez@media (prefers-reduced-motion: reduce) { .dust-mote { animation: none; } .dust-beam { opacity: 0.5; } }. - Le
.dust-containerne porte nirole, niaria-label, niaria-hidden. L'effet étant purement décoratif, ajoutezaria-hidden="true"sur le wrapper pour l'exclure de l'arbre d'accessibilité. - Aucune interaction clavier ou souris n'est exposée : aucune zone cliquable, aucun piège de focus. Le contenu overlay doit rester en dehors du
.dust-containerpour rester tabulable. - Couleur des motes :
rgba(255,220,150,.7)sur fond sombre — la particule est clairement visible (contraste > 4,5:1 en mode normal) mais, étant un élément décoratif non textuel, WCAG 1.4.11 ne s'applique pas. - Le fond du conteneur (
backgroundde.dust-container) peut être supprimé si l'effet est superposé sur une vraie page — ajoutezpointer-events:nonepour que ni les motes ni le rayon ne captent les clics.
Compatibilité navigateur
Nécessite @keyframes CSS et la propriété animation — disponibles depuis Chrome 43, Firefox 16, Safari 9. Aucune dépendance JavaScript.
Sans support des animations CSS (navigateurs < 2015), les motes restent immobiles à leur position initiale avec l'opacité de départ — aucune erreur, l'effet se dégrade en fond statique.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="dust-container" aria-hidden="true">
<div class="dust-beam"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
<div class="dust-mote"></div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .dust-mote { background } | rgba(255, 220, 150, .7) | Couleur et opacité des particules — changez la teinte (ex. bleu rgba(150,190,255,.7)) pour adapter à votre palette sans toucher aux keyframes. |
| .dust-beam { background } (premier stop) | rgba(255, 220, 150, .08) | Intensité et couleur du rayon de lumière — montez à .16 pour un rayon très visible, descendez à .04 pour subtil. |
| .dust-beam { width } | 120px | Largeur du rayon — 80 px pour un pinceau fin, 200 px pour une nappe lumineuse qui traverse la scène. |
| .dust-beam { transform: rotate(Ndeg) } | 15deg | Angle du rayon depuis transform-origin:right top — 0° = vertical tombant, 45° = diagonale prononcée. |
| .dust-mote:nth-child(N) { animation-duration } | 6s – 10s (selon nth-child) | Vitesse individuelle de chaque mote — valeurs basses (3–5 s) = poussière agitée, valeurs hautes (12–18 s) = lenteur atmosphérique. |
| .dust-mote:nth-child(N) { width / height } | 1px – 3px (selon nth-child) | Taille individuelle de chaque mote — restez sous 6 px pour garder l'aspect « grain de poussière » ; au-delà vous obtenez des particules type « bokeh ». |
| .dust-container { background } | linear-gradient(135deg, #1a1a2e 0, #16213e 100%) | Couleur du fond de scène — supprimez la propriété ou passez background:transparent pour superposer l'effet sur votre propre fond (ajoutez alors pointer-events:none). |
FAQ
<div class="dust-mote"></div> dans .dust-container, puis créez une règle .dust-mote:nth-child(N) avec une position (top/left), une taille (width/height), et une animation (dustFloat1, dustFloat2 ou dustFloat3) avec une durée et un délai uniques. Pour supprimer, retirez le div et sa règle nth-child..dust-container en position:absolute; inset:0 sur un parent position:relative, ajoutez pointer-events:none sur le container, et placez votre contenu dans un frère sibling avec position:relative; z-index:1. Le contenu reste interactif et accessible.
