Il rullo delle ore
Selettori, 3D, Fisica
NuovaGratis
Tutti i componenti
Il menu a cannocchiale
Il pulsante Menu è un cannocchiale d'ottone chiuso, col corpo in cuoio: premuto, i tubi escono uno dall'altro, ognuno con uno scatto contro il fermo e un rimbalzo, e su ognuno è inciso una voce del menu. Il tubo sotto il puntatore ruota appena sul suo asse e il riflesso gira sull'ottone, con la zigrinatura del collare che scorre. Chiudendo, i tubi rientrano dall'ultimo al primo. Sul computer si allunga di lato, sul telefono pende in giù.
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 telescope menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the telescope menu: a closed brass telescope is the Menu button. Pressed, its draw tubes slide out one from
the other, each with a click and a bounce, and each carries a section of the site; the tube under the pointer
turns a little and the light runs round the brass. Closing, the tubes go back in from the last to the first -->
<nav class="scope" aria-label="Main" data-scope>
<div class="scope__rig" data-rig>
<ul class="scope__tubes" id="scope-menu" data-menu>
<li class="tube" data-tube><a class="tube__link" href="#shop" data-link><span class="tube__shell" data-shell></span><span class="tube__collar" data-collar></span><span class="tube__label" data-label>Shop</span></a></li>
<li class="tube" data-tube><a class="tube__link" href="#collections" data-link><span class="tube__shell" data-shell></span><span class="tube__collar" data-collar></span><span class="tube__label" data-label>Collections</span></a></li>
<li class="tube" data-tube><a class="tube__link" href="#journal" data-link><span class="tube__shell" data-shell></span><span class="tube__collar" data-collar></span><span class="tube__label" data-label>Journal</span></a></li>
<li class="tube" data-tube><a class="tube__link" href="#about" data-link><span class="tube__shell" data-shell></span><span class="tube__collar" data-collar></span><span class="tube__label" data-label>About</span></a></li>
<li class="tube" data-tube><a class="tube__link" href="#account" data-link><span class="tube__shell" data-shell></span><span class="tube__collar" data-collar></span><span class="tube__eye" data-eye></span><span class="tube__label" data-label>Account</span></a></li>
</ul>
<button class="body" type="button" aria-expanded="false" aria-controls="scope-menu" data-body data-autoclic>
<span class="body__cap" data-cap aria-hidden="true"></span>
<span class="body__leather" data-leather aria-hidden="true"></span>
<span class="body__collar" data-bcollar aria-hidden="true"></span>
<span class="body__words" aria-hidden="true"><span class="body__word" data-word="open">Menu</span><span class="body__word body__word--close" data-word="close">Close</span></span>
<span class="sr" data-name>Open the menu</span>
</button>
</div>
</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.
21 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 cannocchiale» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un cannocchiale chiuso, corto: un corpo fasciato di cuoio scuro con la grana, un paraluce d'ottone zigrinato davanti, un collare d'ottone dietro e l'oculare scuro che sporge appena; sul cuoio, in lettere dorate, MENU. All'apertura della pagina il cannocchiale rotola in vista e i riflessi dell'ottone girano fino a fermarsi. Cliccando, la scritta diventa CLOSE e dal collare esce il primo tubo d'ottone, scivola fuori, sbatte contro il fermo e rimbalza un poco; solo allora dal suo collare esce il secondo, più sottile, e così via fino al quinto, che porta l'oculare. Ogni scatto dà un piccolo colpo a tutto il cannocchiale, che intanto scivola perché resti centrato mentre si allunga. Su ogni tubo, quando è fuori del tutto, compare incisa la voce: Shop, Collections, Journal, About, Account, scure con il bordo inferiore che prende la luce. Ogni tubo ha la sua luce cilindrica: un riflesso stretto e chiaro in alto, una banda scura, un filo di luce in basso, i segni del tornio. Col mouse sopra un tubo il tubo ruota appena sul suo asse: i segni del tornio e i denti della zigrinatura scorrono, il riflesso si sposta un poco e la scritta incisa gira con il metallo, salendo e stringendosi; lasciato, torna oscillando. Cliccando CLOSE l'ultimo tubo rientra per primo, poi il penultimo, fino al primo, e il cannocchiale torna corto al centro. Sul telefono il cannocchiale pende verso il basso e le voci stanno in oro accanto a ogni tubo.
Come funziona
Tubi uno dentro l'altro
Il corpo e cinque tubi con diametri decrescenti (52, 46, 41, 37, 33 pixel) e la stessa lunghezza. La posizione di ogni tubo è un numero s, da meno la sua corsa (tutto dentro) a 0 (fuori contro il fermo), misurato dalla bocca del tubo prima: così un tubo porta con sé tutti quelli che ha dentro. Ognuno resta per 10 pixel sotto il collare di quello prima, e quelli più larghi stanno sopra, così i tubi dentro sono nascosti dal metallo.
Molle col fermo e il vincolo
Aprendo, ogni tubo è tirato fuori con una forza PULL e frenato un poco dall'aria; quando arriva al fermo rimbalza indietro con BOUNCE della sua velocità e la forza lo riporta contro il fermo finché si posa. Il vincolo: un tubo comincia a muoversi solo quando quello da cui esce ha toccato il suo fermo; chiudendo è il contrario, dall'ultimo al primo, con una spinta più debole (PUSH). La fisica gira a mano sul ticker di GSAP in passi da 1/240 di secondo, col passo del fotogramma limitato a 1/30.
La luce di un cilindro in un gradiente
L'ombreggiatura di ogni tubo è un linear-gradient di traverso, ricalcolato quando il tubo gira: per 28 punti sul diametro lo script trova l'angolo della superficie (l'arcoseno) e somma una luce diffusa, un riflesso stretto in alto, un filo di luce in basso e una banda scura, tutti fermi rispetto allo studio, più i segni del tornio, che appartengono al metallo e quindi girano con l'angolo phi. I collari usano 72 punti con i denti della zigrinatura, che scorrono quando il tubo ruota.
La rotazione sotto il puntatore
Ogni tubo ha un angolo phi su una molla (SPIN) verso TURN radianti quando il puntatore è sopra e verso 0 quando esce: la molla oscilla un poco, e il riflesso si sposta del 22 per cento della rotazione mentre i segni del tornio si spostano del tutto. La scritta incisa si sposta di traverso del seno dell'angolo e si stringe del coseno, come se girasse sulla superficie. A ogni scatto contro il fermo il tubo riceve una piccola spinta di rotazione, e tutto il cannocchiale un colpo lungo l'asse.
Centrato, in due orientamenti
La lunghezza attuale del cannocchiale si calcola dalle posizioni, e il gruppo scivola di metà della differenza perché resti centrato mentre si allunga. Sotto VERTICAL_BELOW pixel di larghezza il cannocchiale pende in giù: le misure diventano verticali, il gradiente gira di 90 gradi e le voci stanno accanto ai tubi. Il pulsante ha aria-expanded, Esc chiude e torna al pulsante, le frecce passano da una voce all'altra e il menu chiuso è inert.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PULL | script.js | 9000 | Quanto forte è tirato fuori ogni tubo, in pixel al secondo al quadrato: di più, un'apertura più rapida. |
BOUNCE | script.js | 0.32 | Quanta velocità tiene un tubo rimbalzando sul fermo. |
PUSH | script.js | 0.75 | La chiusura, fatta a mano: quanto forte, rispetto all'apertura. |
TURN | script.js | 0.35 | Di quanto ruota un tubo sotto il puntatore, in radianti. |
SPIN | script.js | [70, 0.3] | La molla di quella rotazione: rigidità e smorzamento (1 = senza oscillare). |
VERTICAL_BELOW | script.js | 820 | Sotto questa larghezza della pagina il cannocchiale pende in giù invece di stare di traverso. |
Quando usarla
Per il menu di un negozio o di un sito con un carattere artigianale, d'antiquariato o di viaggio: strumenti, mappe, orologi, caffè, una rivista di esplorazioni. Cinque o sei voci al massimo: ogni voce è un tubo.
Sul telefono
Sotto gli 820 pixel il cannocchiale pende in giù dal pulsante e le voci, in oro sul nero, stanno accanto a ogni tubo: tutto sta in 240 pixel di larghezza e meno di 440 di altezza. Il tocco su un tubo lo fa ruotare come il mouse sopra, e tutta la riga della voce è da toccare.
Con il movimento ridotto
Niente tubi che scorrono e niente rotazioni: aprendo, il cannocchiale compare già allungato in dissolvenza, con le voci; chiudendo svanisce e torna corto. La scritta MENU e CLOSE cambia senza movimento.
Trappole
- Le voci incise in corpo 15 riempivano quasi tutto il tubo e, mentre i tubi rientravano, l'inizio della parola passava sotto il collare del tubo prima: la scritta è più piccola e compare solo quando il tubo è fuori almeno all'86 per cento, cioè quando niente la copre.
- Ruotando, la scritta incisa saliva tanto da toccare il bordo del tubo: la rotazione sotto il puntatore è di 0,35 radianti e la scritta si sposta solo del 60 per cento del raggio.
- Un riflesso che gira tutto con il tubo sembra una striscia dipinta, non metallo: il riflesso dipende dalla luce e dall'occhio, quindi resta quasi fermo, e girano i segni del tornio e i denti della zigrinatura.
- Sul telefono le voci accanto a tubi di diametro diverso cominciavano ognuna più a sinistra della precedente, in diagonale: la loro posizione si misura dall'asse del cannocchiale, così stanno tutte in colonna.
- Un tubo più lungo di quello che lo contiene, da chiuso, spunterebbe dietro il corpo: tutti i tubi hanno la stessa lunghezza, il corpo è più lungo di loro, e solo l'oculare sporge di proposito, come su un cannocchiale vero.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
