Rope Physics
Une corde Verlet de 25 segments aux deux extrémités ancrées réagit au glisser de souris en temps réel : la contrainte de longueur est résolue en 10 itérations par trame, la gravité tire les nœuds vers le bas. Canvas net sur Retina, boucle suspendue hors écran, corde statique sous mouvement réduit.
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-0390-root contient un canvas .fx-0390-canvas de 100 % × 300 px. À l'initialisation, le script mesure la largeur, applique devicePixelRatio et construit 26 nœuds espacés de 12 px. Les nœuds 0 et 25 sont épinglés à 20 % et 80 % de la largeur ; les 24 autres sont libres.
La boucle utilise l'intégration de Verlet : à chaque trame, chaque nœud libre calcule sa vélocité implicite depuis sa position précédente (vx = (x − oldX) × 0,99), ajoute la gravité (0,5 px/trame), puis résout en 10 itérations la contrainte de longueur de segment. La mise à l'échelle par dt / 16,67 (borné à 50 ms) garantit que la simulation ne diverge pas après un onglet en arrière-plan.
Un mousedown (ou touchstart) trouve le nœud le plus proche du curseur dans un rayon de 15 px et l'accroche au pointeur ; mousemove (ou touchmove) déplace ce nœud. Un IntersectionObserver observe la racine pour suspendre la boucle hors écran. Sous mouvement réduit, la corde s'affiche dans sa position de repos sans boucle.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas et la corde est dessinée dans sa position de repos. L'effet est visible et lisible. - Clavier : l'interaction requiert une souris ou un doigt (glisser sur un nœud de la corde). Il n'existe pas d'équivalent clavier naturel pour un glisser sur canvas. Les utilisateurs au clavier ne peuvent pas déformer la corde.
- Toucher :
touch-action: nonesur le canvas empêche le défilement de la page quand le doigt glisse dessus. L'effet répond au toucher sur mobile. - Rôle décoratif : le canvas ne porte aucune information textuelle. Si la corde représente un câble nommé ou un trajet, exposez cette information en texte à côté.
Compatibilité navigateur
Canvas 2D (devicePixelRatio, IntersectionObserver, matchMedia), aucune dépendance. IntersectionObserver disponible depuis Chrome 51, Firefox 55 et Safari 12.1. Non mesuré dans Firefox et WebKit.
Sans JavaScript, le canvas reste vide. Sans IntersectionObserver, la simulation tourne aussi hors écran. Sans matchMedia, la corde s'anime même sous mouvement réduit.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0390-root"><div class="physics-container"><canvas class="fx-0390-canvas"></canvas><span class="info-label">Texte d'aide</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 |
|---|---|---|
Nombre de segments (JS — SEGS = 25) |
25 segments | 10 segments donnent une corde grossière mais très rapide, 50 une corde plus fine et souple (plus de calcul). |
Longueur de segment (JS — SEGLEN = 12) |
12 px | 8 px pour une corde plus courte et tendue, 18 px pour une corde plus lâche et pendante. |
Gravité (JS — n.y += vy * scale + 0.5 * scale) |
0,5 px/trame | 0,2 pour une corde presque horizontale, 1 pour une corde très lourde qui retombe vite. |
Couleur de la corde (JS — ctx.strokeStyle = '#d946ef') |
#d946ef (fuchsia) |
Remplacez par la couleur de votre charte. L'épaisseur se règle via ctx.lineWidth = 6. |
Position des extrémités (JS — x0 = 0.2 * W, x1 = 0.8 * W) |
20 % et 80 % de la largeur | 0 * W et 1 * W pour ancrer la corde aux bords extrêmes du canvas. |
FAQ
SEGS sont épinglés. Leurs positions sont lues depuis x0 et x1 à l'initialisation. Pour des ancres mobiles, retirez pinned: true sur ces nœuds et mettez-les à jour dans la boucle.
