Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
Il menu a scala di corda
Il menu di un campeggio di case sugli alberi: chiuso è una botola di legno con le cerniere di ferro e un anello d'ottone. Premuta, la botola si apre e ne cade una scala di corda arrotolata, che si srotola gradino dopo gradino, si tende di colpo e oscilla prima di fermarsi: ogni piolo è una voce. Le due corde sono simulate punto per punto, con la torsione disegnata; sopra un piolo la scala si tende come sotto un peso e il piolo si inclina e scricchiola; scelto, si accende di luce calda e la scala risale arrotolandosi.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The rope ladder menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of a treehouse camp: closed, the button is a wooden trapdoor. Pressed, the lid swings open on its
hinges and a rope ladder drops out of the hole, unrolling rung after rung, and sways before it settles. Every
rung is a section of the site. The two ropes are simulated (verlet) and drawn on the canvas; the rungs are
real links, moved every frame to where the ropes hold them -->
<nav class="ladder" aria-label="Fernhollow Treehouses" data-ladder>
<canvas class="ladder__ropes" aria-hidden="true" data-ropes></canvas>
<ul class="ladder__rungs" id="ladder-menu" data-rungs inert>
<li><a class="rung" href="#treehouses" data-rung><span class="rung__wood" aria-hidden="true"><span class="rung__lash"></span><span class="rung__lash rung__lash--r"></span></span><span class="rung__label">Treehouses</span></a></li>
<li><a class="rung" href="#book" data-rung><span class="rung__wood" aria-hidden="true"><span class="rung__lash"></span><span class="rung__lash rung__lash--r"></span></span><span class="rung__label">Book a stay</span></a></li>
<li><a class="rung" href="#trails" data-rung><span class="rung__wood" aria-hidden="true"><span class="rung__lash"></span><span class="rung__lash rung__lash--r"></span></span><span class="rung__label">Forest trails</span></a></li>
<li><a class="rung" href="#campfire" data-rung><span class="rung__wood" aria-hidden="true"><span class="rung__lash"></span><span class="rung__lash rung__lash--r"></span></span><span class="rung__label">Campfire nights</span></a></li>
<li><a class="rung" href="#find-us" data-rung><span class="rung__wood" aria-hidden="true"><span class="rung__lash"></span><span class="rung__lash rung__lash--r"></span></span><span class="rung__label">Find us</span></a></li>
</ul>
<!-- the trapdoor is the menu button -->
<button class="hatch" type="button" aria-expanded="false" aria-controls="ladder-menu" data-hatch data-autoclic>
<span class="hatch__hole" aria-hidden="true">
<span class="hatch__close">
<svg viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8"/></svg>
Close
</span>
</span>
<span class="hatch__knuckle" aria-hidden="true"></span>
<span class="hatch__knuckle hatch__knuckle--low" aria-hidden="true"></span>
<span class="lid" aria-hidden="true" data-lid>
<span class="lid__face lid__face--front">
<span class="lid__strap"></span>
<span class="lid__strap lid__strap--low"></span>
<span class="lid__word">Menu</span>
<svg class="lid__ring" viewBox="0 0 30 30">
<rect class="lid__plate" x="9" y="2" width="12" height="7" rx="2"/>
<circle class="lid__loop" cx="15" cy="17" r="8"/>
<path class="lid__glint" d="M9.2 13.4a7 7 0 0 1 4.6-3.6"/>
</svg>
</span>
<span class="lid__face lid__face--back"></span>
</span>
<span class="sr" data-name>Open the menu</span>
</button>
<p class="sr" aria-live="polite" data-live></p>
</nav>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
29 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il menu a scala di corda» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero c'è una botola di legno nel suo telaio scuro: tre assi chiare con le venature, due bandelle di ferro inchiodate a sinistra, un anello d'ottone a destra e la parola Menu bruciata nel legno. Passandoci sopra il coperchio si solleva di uno spiraglio e dalla fessura esce la luce calda della stanza. Premendo, il coperchio si apre verso l'alto con un rimbalzo e nel buco illuminato compare Close; dal buco cade una scala di corda arrotolata, che scendendo si srotola: i pioli escono dal rotolo uno dopo l'altro, girandosi, finché le corde si tendono di colpo, la botola prende lo strattone e la scala oscilla di lato prima di fermarsi, mentre dall'alto scende un cono di luce calda. Ogni piolo è un'asse di legno chiaro con le corde legate alle estremità e il nome della voce bruciato sopra: Treehouses, Book a stay, Forest trails, Campfire nights, Find us; la voce in cui sei è color brace. Le corde sono di canapa ritorta, con i fili disegnati di sbieco e un capo legato in fondo. Sopra un piolo la scala si tende come se qualcuno ci salisse: il piolo scende, si inclina dalla parte del puntatore, trema per un attimo e dalla legatura cade un po' di segatura; le corde sopra si allungano e la loro torsione si distende, e il nome si allarga. Scegliendo una voce il piolo si accende di una luce calda come una lanterna, con un alone intorno, poi la scala risale arrotolandosi dal basso, il rotolo che gira e si ingrossa, e il coperchio ricade nel telaio con un piccolo colpo. Da tastiera Invio apre e porta il fuoco sul piolo della voce attuale, le frecce salgono e scendono, Invio sceglie, Esc riarrotola la scala.
Come funziona
Due corde di punti
Ogni corda è una fila di punti a dieci pixel l'uno dall'altro, mossi con l'integrazione di Verlet: la velocità sta nella differenza fra la posizione di adesso e quella di prima, con la gravità e uno smorzamento (DAMPING). A ogni passo, centoventi al secondo e mai più lunghi di 1/30 di secondo, quattordici giri di vincoli rimettono ogni tratto alla sua lunghezza e il primo punto di ogni corda attaccato alla botola.
I pioli sono vincoli rigidi
Ogni piolo lega un punto della corda di sinistra a quello alla stessa altezza della corda di destra con un vincolo di distanza fisso: così la scala si storce, oscilla e si torce tutta insieme. I pioli sono link veri in una lista: a ogni fotogramma lo script mette ciascuno nel punto medio dei suoi due punti e lo ruota dell'angolo fra di loro (atan2).
Lo srotolamento
La parte di corda ancora arrotolata non è libera: i suoi punti stanno sul rotolo, che cade con la gravità e un po' d'attrito, e passano alla fisica uno dopo l'altro con la velocità del rotolo man mano che scende. I pioli escono girandosi (scaleY), il rotolo si assottiglia; quando l'ultimo punto è libero le corde si tendono di colpo, la botola prende lo strattone e la scala riceve una spinta di lato (SWAY) che la fa oscillare. Per risalire si fa il contrario: il rotolo sta sulla corda e si mangia un punto alla volta, a REEL pixel al secondo.
Il peso su un piolo
Sopra un piolo i suoi due punti ricevono una forza verso il basso (WEIGHT), più forte dal lato del puntatore. Le corde sopra si allungano un poco (STRETCH) e, dal lato del puntatore, il tratto subito sopra il piolo si allunga mentre quello sotto si accorcia altrettanto: così si inclina solo quel piolo e il resto della scala pende dritto sotto di lui. Il piolo trema per un attimo (un seno smorzato sull'angolo) e dalla legatura cade una manciata di segatura.
Corde ritorte su canvas
Le corde sono curve morbide (quadraticCurveTo fra i punti medi) su un canvas: un bordo scuro, il corpo con un gradiente dall'alto, una riga di luce, e i fili della torsione come trattini di sbieco a passo fisso lungo la corda. Dove un tratto è stirato il passo si allunga e i trattini si distendono. Il cono di luce dalla botola e l'alone del piolo acceso sono gradienti radiali; quando niente si muove più il canvas smette di ridisegnare.
Botola, tastiera, accessibilità
La botola è un button con aria-expanded e aria-controls; il coperchio gira in 3D sulla cerniera con GSAP (un rimbalzo aprendo, un colpo chiudendo). La lista dei pioli è inert finché la scala è arrotolata. Da tastiera il fuoco va al piolo della voce attuale quando la scala atterra; le frecce scorrono i pioli, Invio sceglie, Esc e un clic fuori riarrotolano la scala; un'area aria-live legge la voce scelta.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRAVITY | script.js | 1900 | La gravità sulle corde, in pixel al secondo al quadrato. |
DAMPING | script.js | 0.9 | Quanto in fretta si spegne l'oscillazione (0.2 oscilla a lungo, 3 si ferma quasi subito). |
SWAY | script.js | 110 | La spinta di lato che riceve la scala quando atterra, in pixel al secondo. |
WEIGHT | script.js | 1500 | Quanto forte è tirato in giù un piolo sotto il puntatore, come se qualcuno ci salisse. |
STRETCH | script.js | 0.05 | Quanto cedono le corde sopra quel piolo sotto il peso (0.05 = il cinque per cento); dà anche l'inclinazione del piolo. |
RUNG_GAP | script.js | 70 | La corda fra un piolo e l'altro, in pixel. |
GLOW | script.js | 0.6 | I secondi in cui il piolo scelto resta acceso prima che la scala risalga. |
REEL | script.js | 700 | Quanto in fretta la scala si riarrotola, in pixel al secondo. |
Quando usarla
Per il menu di un sito all'aria aperta o giocoso: un campeggio, un rifugio, case sugli alberi, un parco avventura, un'attività per bambini, un gioco. Da tre a sei voci brevi (il nome deve stare su un piolo largo 176 pixel); con di più la scala diventa troppo lunga per lo schermo.
Sul telefono
La scala è larga 340 pixel e ci sta intera a 390, aperta e mentre oscilla. Il dito che preme su un piolo ci sale sopra (il piolo si inclina dalla parte del dito e scricchiola) e lasciandolo lo sceglie; la botola si apre e si chiude col tocco.
Con il movimento ridotto
Niente cade e niente oscilla: il coperchio sparisce in dissolvenza e la scala compare già appesa dritta, in dissolvenza; sopra un piolo il legno si scalda di colore senza muoversi; il piolo scelto si accende, poi la scala svanisce e il coperchio torna.
Trappole
- Con le corde che si allungavano tutte dal lato del puntatore, il peso su un piolo inclinava anche tutti quelli sotto di lui: il tratto subito sotto il piolo si accorcia di quanto si allunga quello sopra, così si inclina solo il piolo toccato.
- A 900 pixel al secondo la scala risaliva in mezzo secondo e non si vedeva arrotolarsi: ora risale a 700, con una partenza in accelerazione, e le righe delle assi nel rotolo girano davvero con lui (sono linee intorno a un cilindro, disegnate solo sul lato che guarda chi guarda).
- Il cono di luce disegnato come un trapezio aveva i bordi netti, e un gradiente tondo tagliato in alto lasciava una riga orizzontale accanto alla botola: è un gradiente radiale schiacciato in due metà, lungo sotto e corto sopra, senza bordi da nessuna parte.
- Il coperchio che si apriva verso chi guarda, con la cerniera a sinistra, a riposo copriva la fessura (lo spiraglio al passaggio non si vedeva) e da aperto usciva dal riquadro a sinistra. Ora si apre verso l'alto, dentro la casa, e dalla fessura esce la luce.
- Con la scala arrotolata i pioli, invisibili, prendevano il fuoco col Tab: la lista è inert finché la scala non è aperta, e da tastiera il fuoco arriva al piolo quando la scala atterra, non prima.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 9 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
