Interactive Newton's Cradle
Cinq billes canvas suspendues à une barre par des fils de 120 px répondent à la physique angulaire : l'élan se transfère de bille en bille lors des collisions. Cliquer et tirer une bille l'élève, puis la relâcher la lance. Canvas net sur Retina, boucle suspendue hors écran, billes fixes 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
Interactive Newton's Cradle — à distinguer de Newton's Cradle Loop (fx-0384, animation automatique) : ici l'utilisateur tire lui-même les billes et déclenche les collisions. La racine .fx-0389-root contient un canvas .fx-0389-canvas de 100 % × 300 px. Le script calcule le devicePixelRatio à l'init, dimensionne le bitmap en conséquence et dessine en pixels CSS grâce à ctx.scale(dpr, dpr). Les cinq billes sont réparties à 40 px d'intervalle autour du centre horizontal ; la première commence à −0,5 radian pour amorcer l'oscillation.
À chaque trame, l'accélération angulaire de chaque bille libre vaut −0,0015 × sin(angle) (pendule simple), avec un amortissement de 0,9995 par trame. Les collisions sont détectées quand la distance horizontale entre deux billes consécutives est inférieure à la somme de leurs rayons : l'élan est alors échangé et les angles ajustés pour séparer les billes. La mise à l'échelle par dt / 16,67 (borné à 50 ms) garantit une simulation stable après un onglet en arrière-plan.
Un mousedown (ou touchstart) recherche la bille sous le curseur en comparant la distance à son rayon ; mousemove (ou touchmove) met à jour l'angle de la bille tenue en fonction de la position horizontale du curseur, bornée à ±0,8 radian. Un IntersectionObserver observe la racine pour suspendre la boucle hors écran.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas et les billes s'affichent dans leur position initiale sans oscillation. L'effet est visible et lisible. - Clavier : l'interaction nécessite une souris ou un doigt (clic-glisser sur une bille). Il n'existe pas d'équivalent clavier naturel pour un clic-glisser sur un canvas. Les utilisateurs au clavier ne peuvent pas interagir avec l'effet — à dire honnêtement si l'effet est utilisé comme composant fonctionnel.
- 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 les billes représentent des entités nommées, exposez ces noms en texte à côté du canvas.
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, les billes s'animent 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-0389-root"><div class="physics-container"><canvas class="fx-0389-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 |
|---|---|---|
Longueur des fils (JS — var STR = 120) |
120 px | 80 px pour un pendule plus rapide et compact, 160 px pour un balancement plus lent et ample. |
Angle initial (JS — angle: i === 0 ? -0.5 : 0) |
−0,5 radian pour la première bille | −0,8 pour un départ plus fort (élan maximal : 0,8 radian), 0 pour démarrer en équilibre (attendre un clic). |
Amortissement (JS — Math.pow(0.9995, scale)) |
0,9995 par trame | 0,999 arrête l'oscillation en quelques secondes, 0,9999 la maintient quasi indéfiniment. |
Couleurs des billes (JS — dégradé dans createRadialGradient) |
#8b5cf6, #6366f1, #4338ca |
Remplacez par la couleur primaire de votre charte. Les trois arrêts du dégradé donnent l'effet 3D. |
Nombre de billes (JS — for (var i = 0; i < 5; i++)) |
5 billes | 3 ou 7 billes fonctionnent ; ajustez l'espacement (40 * i) et l'offset (−80) en conséquence. |
FAQ
dragIdx) est maintenu. Pour tirer deux billes, il faudrait gérer deux touches simultanées (Touch.identifier) et deux index de glisser.H = 300 dans le JS et la règle CSS .fx-0389-canvas { height: 300px }. La barre d'accroche se redessine automatiquement à y = 30 ; les fils descendent de STR pixels en dessous.
