Newton's Cradle Loop
Cinq pendules DOM alignés oscillent en échangeant l'élan selon la mécanique classique : lever un pendule d'un côté, relâcher, et celui de l'autre côté repart du même angle. La séquence repart automatiquement toutes les quelques secondes.
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
Cinq div.nc384-wire (fils) portent chacun un div.nc384-bob (boule). Chaque fil pivote autour de son point d'attache (transform-origin: center top) via un angle stocké dans un tableau JavaScript. La physique est un pendule simple : à chaque image, velocity += -G × sin(angle) × f avec G = 0,004, puis velocity *= 0.999^f (amortissement minimal) et angle += velocity × f. Le step est normalisé à 60 fps : f = dt / 16.67.
L'échange d'élan est simulé par une bascule : quand le pendule de gauche revient à l'angle 0, sa vitesse est transférée au pendule de gauche suivant s'il était au repos, ou vice-versa à droite. Cette approximation suffit pour l'illusion visuelle. La séquence de lancement est pré-définie (levee compte à rebours) : toutes les 5 s environ, l'angle du pendule de gauche est initialisé à 0,5 rad et la séquence repart. Un IntersectionObserver met la boucle en pause hors écran. Sous mouvement réduit, les pendules sont affichés fixes à angle 0.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas et les cinq pendules s'affichent verticaux et fixes. L'état est lisible. - Clavier et toucher : l'effet n'est pas interactif. Les pendules oscillent seuls ; rien ne se passe au clic, au toucher ou au clavier.
- Rôle décoratif : la zone n'a pas de rôle ARIA. Si elle illustre un contenu (un titre, un concept), ajoutez le texte à côté de la racine et
aria-hidden="true"sur.nc384-stage.
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é. Non vérifié sur Safari réel ; attendu complet.
Sans JavaScript, les pendules s'affichent verticaux et fixes. Sans IntersectionObserver, la boucle tourne aussi hors écran.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0384-root">
<div class="nc384-stage">
<div class="nc384-row"></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 pendules (JS — créer N fils et boules) | 5 | 3 pendules donne un rendu plus épuré ; 7 un effet plus riche. L'échange d'élan devient moins précis au-delà de 7 dans cette implémentation simplifiée. |
Longueur des fils (CSS — .nc384-wire { height: 150px }) |
150 px | 200 px ralentit l'oscillation (période plus longue) ; 80 px l'accélère. |
Angle initial (JS — pendulums[0].angle = 0.5) |
0,5 rad (≈ 29°) | 0,8 rad (≈ 46°) donne des oscillations plus amples et plus rapides ; 0,3 un balancement presque invisible. |
Amortissement (JS — velocity *= Math.pow(0.999, f)) |
0,999 — quasi sans perte | 0,995 fait s'arrêter les pendules en quelques secondes ; 0,9999 les garde en oscillation très longtemps. |
Couleur des fils et boules (CSS — .nc384-wire, .nc384-bob) |
gradient indigo, boules indigo | Restreignez à une teinte unie pour un aspect minimaliste ; utilisez des couleurs par index pour des boules multicolores. |
FAQ
pendulums (variable locale à la fermeture). Modifiez leurs propriétés dans les lignes du script : pendulums[0].angle = 0.5; pendulums[0].velocity = 0; relance la séquence depuis la gauche. Pour déclencher depuis l'extérieur de l'effet, exposez d'abord la référence ou émettez un événement personnalisé sur la racine.velocity *= 0.999^f) retire une infime fraction d'élan à chaque image. Sur un écran 60 Hz, l'oscillation dure environ 15 à 20 s avant de devenir imperceptible, puis le script relance automatiquement.
