Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il menu dell’acquario
Nello stile ricco: il pulsante Menu di un acquario è una piccola boccia coi pesci; premuto, sotto si apre una vasca, l’acqua sale sulla sabbia, le piante si alzano e cinque pesci arrivano a nuoto dai due lati e si mettono in fila, ognuno col cartellino di una voce appeso a un filo.
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 aquarium menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu of a public aquarium: the Menu button is a little round fishbowl; pressed, a tank opens under it,
the water rises over the sand, the plants lift and sway, the bubbler starts, and five fish swim in from the
sides and line up, each one holding the tag of a menu item on a string. Pointing at an item, its fish turns
round and lets out a bubble; choosing it, the fish loops and the tag lights up. Closing, the fish swim away
and the water drains. -->
<nav class="acquario" aria-label="Main" data-acquario>
<button class="bowl" type="button" aria-expanded="false" aria-controls="acquario-tank" data-toggle>
<svg class="bowl__glass" viewBox="0 0 48 48" aria-hidden="true">
<defs>
<radialGradient id="bowl-water" cx="0.4" cy="0.35" r="0.75">
<stop offset="0" class="stop-turq"/>
<stop offset="1" class="stop-deep"/>
</radialGradient>
<clipPath id="bowl-clip"><circle cx="24" cy="25" r="17.4"/></clipPath>
</defs>
<g clip-path="url(#bowl-clip)">
<g class="bowl__slosh">
<path class="bowl__water" d="M2 21 Q 13 18.5 24 21 T 46 21 V 48 H 2 Z"/>
<path class="bowl__sand" d="M2 38 Q 14 35 26 37.5 T 46 37 V 48 H 2 Z"/>
</g>
<g class="bowl__fish">
<path class="bowl__fish-tail" d="M-6.5 0 L -10.5 -3.4 L -9.3 0 L -10.5 3.4 Z"/>
<path class="bowl__fish-body" d="M5 0 C 3 -4.2 -3.5 -4.4 -6.8 0 C -3.5 4.4 3 4.2 5 0 Z"/>
<path class="bowl__fish-stripe" d="M0.8 -3.6 C 1.6 -1.2 1.6 1.2 0.8 3.6"/>
<circle class="bowl__fish-eye" cx="2.4" cy="-0.8" r="0.9"/>
</g>
</g>
<circle class="bowl__rim" cx="24" cy="25" r="18.2"/>
<path class="bowl__neck" d="M16 8.4 H 32"/>
<path class="bowl__shine" d="M13.5 18 C 15 13.5 18.5 11 22 10.4"/>
</svg>
<span class="bowl__word" data-word>Menu</span>
</button>
<div class="tank" id="acquario-tank" data-tank inert>
<canvas class="tank__canvas" data-canvas aria-hidden="true"></canvas>
<ul class="tank__items" data-items>
<li><a class="tag" href="#tickets" data-item><span class="tag__hole" aria-hidden="true"></span><span class="tag__word">Tickets</span></a></li>
<li><a class="tag" href="#exhibits" data-item><span class="tag__hole" aria-hidden="true"></span><span class="tag__word">Exhibits</span></a></li>
<li><a class="tag" href="#feeding" data-item><span class="tag__hole" aria-hidden="true"></span><span class="tag__word">Feeding times</span></a></li>
<li><a class="tag" href="#shop" data-item><span class="tag__hole" aria-hidden="true"></span><span class="tag__word">Shop</span></a></li>
<li><a class="tag" href="#visit" data-item><span class="tag__hole" aria-hidden="true"></span><span class="tag__word">Visit</span></a></li>
</ul>
</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.
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 dell’acquario» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante a pillola con una piccola boccia di vetro: dentro c’è l’acqua, la sabbia e un pesce pagliaccio che va avanti e indietro. Premendolo, la scritta diventa Close e sotto si apre una vasca col coperchio di un acquario, Tidewell. L’acqua sale sulla sabbia con la superficie che ondeggia, le piante sdraiate si alzano e cominciano a ondeggiare attaccate alle loro radici, dal sasso del filtro salgono le bolle che scoppiano in superficie, e sulla sabbia corre la luce dell’acqua. Poi cinque pesci arrivano a nuoto dai due lati: un pesce pagliaccio, un chirurgo blu, un chirurgo giallo, un labride turchese e un pesce rosso con la coda lunga. Ognuno si gira dove va, si mette al suo posto in fila e tiene col filo il cartellino di carta di una voce: Tickets, Exhibits, Feeding times, Shop, Visit. Passando su una voce il suo pesce si volta a guardare, fa un saltino e lascia andare una bolla; scegliendola, il pesce fa un giro su sé stesso e il cartellino diventa giallo. Chiudendo, i pesci se ne vanno a nuoto, l’acqua scende e la vasca sparisce.
Come funziona
Una vasca su un canvas
Tutta la vasca si ridisegna a ogni fotogramma su un canvas solo, dal fondo verso il vetro: l’acqua (una forma la cui cima è la superficie ondulata, due onde sommate), le rocce lontane, i raggi di luce, la sabbia coi granelli, i sassi, le piante, la luce sulla sabbia, i pesci coi loro fili, le bolle, le piante davanti, la tinta dell’acqua sopra tutto quello che è sommerso, i riflessi del vetro, la cornice e il coperchio. La sabbia, i sassi e le piante nascono da un caso con un seme fisso, quindi sono uguali a ogni visita e a ogni misura.
Le piante attaccate alle radici
Ogni filo d’alga è una linea di dodici pezzi che parte dalla sua radice nella sabbia: l’angolo si somma dalla radice alla punta, con un’onda che cresce verso la punta, quindi la radice non si muove mai e la punta ondeggia di più. Senz’acqua le piante sono sdraiate e corte; mentre l’acqua sale si alzano con un elastico.
I pesci
Ogni pesce è disegnato in coordinate sue: il corpo con quattro curve, la coda incernierata alla fine del corpo che ruota col battito, le pinne del dorso e del ventre disegnate prima del corpo così la base resta nascosta, la pinna laterale incernierata dietro la branchia, le squame, le strisce chiuse dentro il corpo, l’occhio col riflesso. Il battito della coda accelera con la velocità.
Il nuoto e la girata
I pesci arrivano lungo una curva di Bézier dal bordo al loro posto, SWIM secondi con power2.out, uno ogni STAGGER. La direzione in cui guardano segue la velocità; il ribaltamento è una molla sulla scala orizzontale, così mentre si gira il pesce si fa sottile e poi torna. Al loro posto ondeggiano piano e guardano il cartellino.
I cartellini veri
Le voci sono link veri sopra il canvas: a ogni fotogramma ognuno va verso la bocca del suo pesce con un ritardo, come una cosa portata a un filo, e il filo si disegna dalla bocca al foro del cartellino. Il pulsante ha aria-expanded, la vasca chiusa è inert, Esc chiude e ridà il fuoco al pulsante, le frecce passano da una voce all’altra, un tocco fuori chiude.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FILL | script.js | 1.1 | I secondi che l’acqua impiega a salire. |
SWIM | script.js | 1.15 | I secondi che un pesce impiega ad arrivare al suo posto. |
STAGGER | script.js | 0.14 | I secondi fra un pesce e l’altro. |
WAG | script.js | 1 | Quanto forte i pesci battono la coda. |
SWAY | script.js | 1 | Quanto ondeggiano le piante nella corrente. |
BUBBLES | script.js | 8 | Le bolle al secondo che escono dal sasso del filtro. |
CAUSTICS | script.js | 0.55 | Quanto è chiara la luce dell’acqua che corre sulla sabbia. |
FISH | script.js | 1 | La grandezza dei pesci. |
Quando usarla
Per il menu del sito di un acquario, di un parco marino, di un negozio di pesci o di un museo di scienze: le voci della visita (biglietti, mostre, orari, negozio, come arrivare). Da tre a sei voci: con di più le file si stringono troppo.
Sul telefono
La vasca è larga quanto lo schermo e alta al massimo quanto resta sotto il pulsante; i pesci e i cartellini si rimpiccioliscono con le file. Toccare un cartellino lo sceglie, e il tocco fa anche voltare il suo pesce.
Con il movimento ridotto
La vasca compare in dissolvenza già piena, coi pesci fermi al loro posto e le piante dritte; niente nuoto, bolle, battito della coda né onde. Puntare una voce cambia solo il colore del cartellino.
Trappole
- Le pinne del dorso e del ventre vanno disegnate prima del corpo: dopo, la loro base si vedrebbe sopra il pesce e sembrerebbero appiccicate invece che attaccate.
- Il ribaltamento del pesce col segno della velocità scatta di colpo; con una molla sulla scala orizzontale il pesce si fa sottile mentre si gira, come uno vero visto di lato.
- I cartellini sono link HTML e non disegni: il canvas da solo non si legge con lo screen reader né si raggiunge col tasto Tab. Si spostano con transform a ogni fotogramma, e il filo sul canvas va dalla bocca del pesce al loro foro.
- Le piante, se si fa oscillare ogni pezzo per conto suo, si staccano dalla radice: l’angolo va sommato dalla radice alla punta.
Librerie
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
