Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il menu a ombrello
Il menu di un negozio di ombrelli fatti a mano come un ombrello vero, in 3D: chiuso è arrotolato, con la fascetta abbottonata e un cartellino Menu appeso al manico. Premuto, la fascetta si slaccia, il cursore scatta su per l’asta, le stecche si aprono e la tela si tende spicchio per spicchio con un rimbalzo; ogni spicchio porta una voce stampata sulla stoffa. Al passaggio lo spicchio si gonfia e prende luce; scelto, si abbassa come premuto e l’ombrello si richiude, con la tela che si affloscia fra le stecche e la fascetta che torna a chiuderlo.
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 umbrella menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/standard-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the umbrella menu: a furled umbrella with its strap done up is the Menu button. Pressed, the strap lets go,
the runner snaps up the shaft, the ribs spread and the canopy pulls taut panel by panel; every panel is a
section of the shop. The whole umbrella is drawn in 3D on a canvas: ribs, stretchers, folds and light -->
<div class="brolly" data-brolly>
<canvas class="brolly__canvas" aria-hidden="true" data-canvas></canvas>
<button class="brolly__btn" type="button" aria-expanded="false" aria-controls="brolly-menu" data-btn data-autoclic>
<span class="sr" data-name>Open the menu</span>
</button>
<!-- the sections: real links, one for each panel of the canopy (the canvas draws them on the fabric) -->
<nav class="brolly__nav" id="brolly-menu" aria-label="Main" data-nav inert>
<ul>
<li><a href="#umbrellas" data-item>Umbrellas</a></li>
<li><a href="#parasols" data-item>Parasols</a></li>
<li><a href="#canes" data-item>Canes</a></li>
<li><a href="#repairs" data-item>Repairs</a></li>
<li><a href="#journal" data-item>Journal</a></li>
<li><a href="#gifts" data-item>Gifts</a></li>
<li><a href="#stores" data-item>Stores</a></li>
<li><a href="#about" data-item>About</a></li>
</ul>
</nav>
<p class="sr" aria-live="polite" data-live></p>
</div>
</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.
30 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 ombrello» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un ombrello chiuso, inclinato di traverso con la punta d’ottone in alto a destra: la tela a spicchi rosso vino e crema è arrotolata stretta intorno all’asta, tenuta da una fascetta con il bottone a pressione d’ottone; in basso il manico di legno curvo, e appeso al manico con uno spago un cartellino di carta con scritto Menu e, in corsivo, la voce in cui sei (Umbrellas). Passandoci sopra l’ombrello si inclina appena e il cartellino dondola. Premuto, la fascetta si slaccia e ricade, il cursore sale lungo l’asta e si ferma contro lo scatto con un piccolo rimbalzo, le stecche si aprono spinte dai tiranti e flettono un attimo, mentre l’ombrello gira verso di te, finché lo vedi dall’alto, appena inclinato; la tela, ancora floscia, si tende uno spicchio dopo l’altro con un piccolo rimbalzo, e su ogni spicchio compare la voce stampata sulla stoffa: Umbrellas, Parasols, Canes, Repairs, Journal, Gifts, Stores, About. Ogni faccetta della tela prende la luce da in alto a sinistra, l’ombrello getta un’ombra morbida sulla pagina e le scritte si piegano con la stoffa. Passando sopra uno spicchio si gonfia e si schiarisce; premendolo si abbassa e si scurisce, poi l’ombrello si richiude: la tela si affloscia fra le stecche, il cursore scende, le pieghe si avvolgono intorno all’asta e la fascetta torna a chiuderle con uno scatto; sul cartellino compare la voce scelta. La punta d’ottone in mezzo all’ombrello aperto lo richiude, come Esc e un clic fuori. Da tastiera le frecce passano da uno spicchio all’altro, con un contorno intorno allo spicchio, Invio sceglie.
Come funziona
Un ombrello in 3D su un canvas
L’ombrello è un modello vero: un asse, otto stecche che partono dalla corona, i tiranti, il cursore, l’asta, il manico a uncino. Ogni fotogramma lo script ne calcola i punti in tre dimensioni, li gira con la formula di Rodrigues dalla posa chiusa (di traverso) a quella aperta (verso di te, inclinata di TILT) e li proietta in prospettiva. Le faccette della tela, le aste e le stecche finiscono in un solo elenco ordinato per profondità e si dipingono dal fondo in avanti.
Il cursore decide le stecche
La corona, il cursore e il tirante fanno un triangolo: dalla posizione del cursore sull’asta, col teorema del coseno, viene l’angolo delle stecche. Così basta muovere il cursore: aprendo è spinto in su (PUSH) fino allo scatto, contro cui rimbalza (SNAP) e dà un colpo alle stecche, che hanno una flessione su una molla e oscillano un attimo; chiudendo è tirato giù da una molla smorzata.
La tela che si tende e si affloscia
Fra due stecche la tela è una superficie di righe e colonne. Ogni riga ha la stoffa che le spetta nell’ombrello aperto: se lo spazio fra le stecche è più corto, la stoffa in più fa una piega verso fuori, profonda quanto dice il triangolo fra stoffa e spazio, con un tetto (le pieghe vere sono tante e piccole); se la stoffa è tirata oltre, rientra un poco. Ogni spicchio ha una molla sulla sua stoffa in più (TAUT): aprendo si azzera uno spicchio dopo l’altro (STAGGER), con il rimbalzo che fa tendere la tela a scatti; chiudendo torna floscia.
Luce, ombra e scritte sulla stoffa
Ogni faccetta ha la sua normale: davanti prende una luce diffusa e un riflesso morbido, da dentro è più scura con la luce che passa attraverso la stoffa. L’ombra sulla pagina è la sagoma dell’ombrello disegnata su un secondo canvas e incollata con shadowBlur e uno spostamento. Le voci sono stampate sugli spicchi con una trasformazione affine fatta dalle direzioni dello spicchio in quel punto, così si piegano e si accorciano con la tela, e una parola lunga si stringe per stare fra le stecche.
Fascetta, cartellino e il resto
Chiuso, le pieghe girano un poco intorno all’asta e si stringono in un fuso; la fascetta è un anello intorno alle pieghe che, aprendo, si srotola e ricade, e chiudendo torna a stringerle con un back.out di GSAP. Il cartellino è un pendolo appeso al manico: l’accelerazione del manico lo fa dondolare. Quando niente si muove il canvas non si ridisegna.
Tastiera e accessibilità
L’ombrello è un button con aria-expanded e aria-controls, messo sopra l’ombrello chiuso e, aperto, sopra la punta d’ottone. Le voci sono link veri in un nav, inert finché l’ombrello è chiuso, che il canvas disegna sugli spicchi: le frecce, Home e End passano da uno all’altro con un contorno sullo spicchio, Invio sceglie, Esc chiude e il fuoco torna all’ombrello; un’area aria-live legge la voce scelta. Il tocco su uno spicchio lo gonfia e, lasciato lì, lo sceglie.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
OPEN_ANGLE | script.js | 76 | Quanto si aprono le stecche alla corona, in gradi dall’asta. |
PUSH | script.js | 26 | Quanto forte il cursore è spinto su per l’asta: di più, uno scatto più rapido. |
SNAP | script.js | 0.32 | Quanta velocità tiene il cursore rimbalzando contro lo scatto. |
TAUT | script.js | [300, 0.3] | La molla di ogni spicchio che si tende: rigidità e smorzamento (1 = nessun rimbalzo). |
STAGGER | script.js | 0.045 | I secondi fra uno spicchio che si tende e il successivo. |
LIFT | script.js | 16 | Quanto si gonfia uno spicchio sotto il puntatore, in unità del disegno. |
TILT | script.js | 26 | Quanto l’ombrello aperto è inclinato all’indietro, in gradi, rispetto a vederlo dritto dall’alto. |
SPIN | script.js | 50 | Quanto gira la tela intorno all’asta mentre si apre, in gradi. |
Quando usarla
Per il menu di un sito con un carattere artigianale e un po’ di gioco: un negozio di ombrelli, accessori o abbigliamento, un’app del meteo, un albergo al mare, un marchio di design. Otto voci brevi, una per spicchio; con parole lunghe le scritte si stringono.
Sul telefono
Tutto il disegno si scala sulla larghezza dello schermo (a 390 pixel il riquadro è di 358) e l’ombrello aperto ci sta senza sforare. Il tocco su uno spicchio lo gonfia come il mouse sopra, e lasciandolo lì lo sceglie; la punta d’ottone e un tocco fuori lo richiudono.
Con il movimento ridotto
Niente scatti, giri né rimbalzi: l’ombrello sparisce in dissolvenza e ricompare già aperto, o già chiuso con la fascetta, e lo spicchio sotto il puntatore si schiarisce senza gonfiarsi.
Trappole
- Con la stoffa in più messa tutta in una piega sola, a metà apertura gli spicchi si gonfiavano come petali enormi e l’ombrello sembrava un fiore: la piega ha un tetto, piccolo da chiuso (un fuso stretto) e un quinto della stoffa da aperto.
- Da chiuso il cursore lasciava le stecche aperte di nove gradi e la condizione per riallacciare la fascetta non scattava mai: il cursore si ferma più in basso e la fascetta si riallaccia sotto un quinto di apertura.
- Il riflesso sul manico fatto a pezzi, uno per segmento, faceva una fila di puntini: il manico è un solo tratto curvo con il suo riflesso continuo.
- Le voci sugli spicchi in alto, scorciati dalla prospettiva, uscivano dalle stecche: la scritta si stringe quando è più larga dell’ottanta per cento dello spicchio.
- Il canvas usa i due caratteri senza che nessun elemento li chieda, quindi il browser non li scaricava: si caricano a mano con document.fonts.load e poi si ridisegna.
- L’anello del fuoco intorno all’ombrello chiuso era un grande rettangolo: da chiuso il fuoco è un contorno intorno al cartellino, disegnato sul canvas.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 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.
