Repel Particles
100 particules DOM fuient le curseur dans un rayon de 80 px avec une force proportionnelle à la distance, puis reviennent doucement à leur position d'origine.
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
Au chargement, le script crée 100 éléments <div class="rpe-particle"> dans .rpe-zone et leur attribue une position aléatoire (left, top en pourcentage). Chaque particule mémorise ses coordonnées d'origine. Les particules sont des éléments DOM, pas un canvas : chacune peut être stylisée individuellement en CSS.
Un écouteur mousemove sur la zone met à jour la position du curseur. La boucle requestAnimationFrame calcule pour chaque particule la distance euclidienne au curseur. Si cette distance est inférieure à 80 px, la particule est repoussée avec une force inversement proportionnelle à la distance (force = (100 − dist) / 100 × maxForce) ; sa position temporaire est décalée dans la direction opposée au curseur. Si la particule est hors rayon, sa position revient progressivement vers l'origine par interpolation : x += (origX − x) × 0.05 par image. Un IntersectionObserver arrête la boucle quand la zone quitte l'écran.
Sous prefers-reduced-motion: reduce, la boucle ne démarre pas ; les particules restent à leur position initiale, le fond reste visible et animé. Sur écran tactile, l'événement touchmove met à jour la position du curseur fictif pour que les particules fuient aussi le doigt.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle d'animation ne démarre pas. Les particules restent à leur position initiale : le fond reste décoratif mais statique. - Rôle décoratif : les particules ne transmettent aucune information ; elles portent
aria-hiddenimplicitement par leur contenu vide. Aucun contenu textuel ou fonctionnel ne doit être placé dans les particules. - Touch : l'événement
touchmovesur la zone met à jour la position virtuelle du curseur. Les particules fuient aussi le doigt sur écran tactile. - Pas d'interaction critique : la fuite des particules est purement décorative. Aucune action utilisateur ne doit dépendre de la position des particules — elles ne sont pas des boutons ni des cibles.
Compatibilité navigateur
DOM + requestAnimationFrame + 2,2 Ko de JavaScript, aucune dépendance. 100 éléments DOM transformés par image : mesuré à moins de 2 ms de JS par image dans Chromium sur desktop. Sur mobile entrée de gamme, réduire à 50 particules si l'animation décroche. IntersectionObserver disponible depuis Chrome 51, Firefox 55 et Safari 12.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.
Sans JavaScript, les 100 div ne sont pas créées ; la zone .rpe-zone s'affiche vide. Sans IntersectionObserver, la boucle tourne aussi hors écran — impact CPU proportionnel au nombre de particules.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0372-root">
<div class="rpe-zone">
<span class="rpe-label" aria-hidden="true">Bougez la souris</span>
<!-- Les 100 div.rpe-particle sont créées par le JS -->
</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 — count = 100) |
100 particules | Diminuez à 50 pour un effet plus léger, augmentez à 150 pour un fond plus dense. Évitez plus de 200 sur mobile entrée de gamme. |
Rayon de fuite (JS — if (dist < 80)) |
80 px | Augmentez à 120-160 px pour une réaction dès que le curseur approche, diminuez à 40 px pour un effet plus subtil. |
Force maximale (JS — maxForce) |
40 px | Augmentez à 80-80 px pour des particules qui fuient loin, diminuez à 15-20 px pour un déplacement discret. |
Vitesse de retour (JS — lerp = 0.05) |
0,05 (5 % par image) | 0,02 donne un retour plus lent et fluide, 0,15 un retour vif. À 1, les particules reviennent instantanément. |
Apparence des particules (CSS — .rpe-particle) |
carré blanc 3×3 px, opacity 0.7, border-radius 50% | Changez la taille, la couleur, la forme (supprimer le border-radius pour des carrés) ou ajoutez un emoji dans le contenu HTML des particules. |
FAQ
.rpe-particle (ou ajoutez des classes variantes) ou injectez un caractère dans les div lors de leur création : p.textContent = '★' dans la boucle de création.touchmove met à jour la position virtuelle du curseur en extrayant touches[0].clientX/Y. Les particules fuient le doigt comme elles fuient la souris.
