Magnetic Pull
L'élément se translate vers la souris (facteur 0,2 de la distance centre-curseur) et revient en place sur mouseleave — attraction magnétique pure en JavaScript, sans bibliothèque, 400 octets.
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 racine .fx-0358-root centre un bloc .hover-box.hover-magnetic de 200 × 200 px portant l'attribut data-magnetic-box. L'élément a un fond dégradé rose-rouge et une transition transform .2s ease-out pour amortir les micro-secousses entre deux événements mousemove.
Le script (!function(){...}()) recherche tous les .fx-0358-root [data-magnetic-box] et leur attache deux écouteurs. Sur mousemove : il calcule l'écart entre la position du curseur et le centre de l'élément (clientX − rect.left − width/2) et applique transform: translate(a×0.2 px, b×0.2 px) — l'élément se déplace de 20 % de la distance centre-curseur vers le pointeur. Sur mouseleave : transform: translate(0,0) remet l'élément à sa position d'origine (la transition CSS adoucit le retour).
Sous prefers-reduced-motion: reduce, le script skippe le mousemove et l'élément reste immobile. Mesuré dans Chromium 151 : attraction visible, retour automatique, deux copies sur une page — chaque élément suit sa propre souris.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, l'attraction est désactivée et l'élément reste immobile.mouseleavereste actif pour remettre l'élément en place si le mode est activé après un survol. - Clavier et toucher : l'attraction suit
mousemoveuniquement — pas reproductible au clavier ni au toucher. L'élément reste fonctionnel (clic, focus) sans l'effet magnétique. Pour signaler le focus clavier, ajoutez:focus-visible { outline: 2px solid #6366f1; }dans votre CSS de page. - Contenu : l'effet translate l'élément entier. Sur des mises en page serrées, le déplacement de 20 % peut sortir l'élément de son espace alloué — augmentez le padding autour de la zone pour absorber le déplacement.
- Accessibilité de la zone cliquable : comme l'élément se déplace, la zone de clic se déplace aussi. Évitez des zones de déplacement trop grandes pour ne pas désorienter les utilisateurs.
Compatibilité navigateur
400 octets de JavaScript (mousemove, mouseleave, getBoundingClientRect, matchMedia), aucune dépendance. CSS : transform, transition. Mesuré dans Chromium 151 : attraction précise, retour fluide, deux copies indépendantes. Fonctionne dans tous les navigateurs modernes.
Sans JavaScript, l'élément reste statique. Sans transform ou transition, l'attraction ne fonctionne pas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0358-root">
<div class="hover-box hover-magnetic" data-magnetic-box="">
<span>…</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 |
|---|---|---|
Facteur d'attraction (JS — le 0.2 de .2*a et .2*l) |
20 % de la distance centre-curseur | 0.1 rend l'attraction très subtile (10 %) ; 0.3 la rend plus prononcée. Au-delà de 0.4, l'élément peut sortir de son conteneur sur les curseurs aux bords. |
Durée de transition CSS (transition: transform .2s ease-out) |
200 ms | .1s rend le suivi plus réactif ; .4s ajoute une inertie supplémentaire. ease-out est recommandé pour amortir les artefacts entre événements. |
Couleur de fond (CSS — background de .hover-magnetic) |
linear-gradient(135deg, #ec4899, #f43f5e) |
Remplacez par n'importe quel fond (couleur unie, dégradé, image). Le fond ne change pas l'attraction — seul le JS pilote le transform. |
Zone d'écoute (HTML — data-magnetic-box) |
L'élément .hover-magnetic lui-même |
Mettez data-magnetic-box sur un conteneur parent plus grand pour déclencher l'attraction à distance, avant que la souris ne touche l'élément visible. |
Retour au repos (JS — mouseleave) |
translate(0,0) |
La transition CSS (transform .2s ease-out) anime le retour. Pour supprimer l'animation de retour (retour instantané), retirez la propriété transition de .hover-magnetic. |
FAQ
mousemove qui n'est pas émis lors d'un toucher ordinaire. Sur mobile, l'élément reste immobile. L'effet est conçu pour les interfaces à curseur.overflow: hidden. Sans overflow: hidden sur le parent, l'élément peut empiéter sur ses voisins. Prévoyez un padding autour de la zone d'attraction (au moins 20 % × facteur × taille de l'élément)..2*a par Math.max(-30, Math.min(30, .2*a)) (limite de ±30 px) et faites de même pour l.
