Magnetic Field
Cent particules convergent en ligne droite vers un noyau central qui suit la souris : quand une particule l'atteint (< 30 px), elle respawne à une position aléatoire et reprend sa trajectoire. Un champ en mouvement permanent, sans pause ni état de repos.
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
Le noyau (div.mf383-core) est positionné en absolu dans la zone .mf383-field. Sa position cible est mise à jour à chaque événement mousemove (ou touchmove) ; à chaque image, il avance de 8 % de l'écart restant (lerp avec facteur 0,08 × f), ce qui lui donne un mouvement fluide en inertie.
Les 100 particules (div.mf383-particle) sont créées au chargement avec des positions et des vitesses initiales aléatoires. À chaque image, chaque particule est attirée vers le noyau : vx += (cx − px) × 0.03 × f ; vy += (cy − py) × 0.03 × f. Les vitesses sont amorties (vx *= 0.95^f). Quand la particule est à moins de 20 px du noyau, elle respawne aléatoirement dans la zone. Sous mouvement réduit, les particules sont réparties en anneau fixe autour du centre et ne bougent pas.
Accessibilité
- Toucher :
touchmovedéplace le noyau vers le doigt. L'interaction est identique à la souris. - Clavier : l'effet est purement décoratif et ne réagit pas au clavier. Aucune information n'est réservée à la souris.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les particules sont placées en anneau fixe autour du centre, visibles et lisibles, sans aucune animation. - Pas de rôle ARIA : la zone
.mf383-fieldn'a pas de rôle. Si elle illustre un concept (un logo, un titre), ajoutez le contenu textuel à côté etaria-hidden="true"sur la zone.
Compatibilité navigateur
DOM pur et CSS, aucune dépendance. IntersectionObserver disponible depuis Chrome 51, Firefox 55, Safari 12.1. Physique par requestAnimationFrame normalisée sur le temps écoulé. 100 divs animés : coût mesuré < 1 ms/image dans Chromium sur machine de bureau. Non vérifié sur Safari réel ; attendu complet.
Sans JavaScript, la zone affiche uniquement le noyau central fixe, les particules ne sont pas créées.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0383-root">
<div class="mf383-field">
<div class="mf383-core"></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 |
|---|---|---|
Nombre de particules (JS — constante COUNT) |
100 | 50 donne un effet plus aéré ; 200 un nuage dense. Au-delà de 150, vérifiez la performance sur mobile. |
Force d'attraction (JS — vx += ... * 0.03 * f) |
0,03 | 0,06 rapproche les particules très vite du noyau ; 0,01 donne des trajectoires longues et elliptiques. |
Amortissement (JS — vx *= Math.pow(0.95, f)) |
0,95 | 0,98 donne des vitesses plus élevées et une orbite plus chaotique ; 0,8 des particules qui s'arrêtent presque aussitôt et replongent. |
Taille du noyau (CSS — .mf383-core { width, height }) |
60 px | Adaptez aussi le seuil de respawn (dist < 20) à la moitié du nouveau rayon. |
Couleur des particules (CSS — .mf383-particle { background }) |
#6366f1 |
Pour des couleurs par particule, assignez la couleur depuis le JS lors de la création. |
FAQ
div avec border-radius: 50%. Retirez-le pour un carré ; ou ajoutez un SVG, une image ou du texte à l'intérieur. Le positionnement et le déplacement sont gérés par les propriétés left et top en JavaScript.
