Il menu a persiana

Menu, 3D, Fisica, TransizioniSolo CSS, GSAPImpegnativaPeso compresso: Demo 7,4 KBGSAP 28 KBGratisScarica lo zip

Una persiana di stecche color avorio copre il menu: aprendolo le stecche ruotano in 3D una dopo l’altra, a scalinata, ognuna sulla sua molla, e fra loro compaiono le voci; chiudendo si richiudono partendo dal basso, e col puntatore sopra le stecche vicine si inclinano verso di lui.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The venetian blind menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="page" data-page>
    <!-- the menu: behind the blind, it shows through as the slats turn -->
    <nav class="menu" id="menu" aria-label="Main" data-menu inert>
      <ul class="menu__links">
        <li><a class="menu__link" href="#" data-link><span class="menu__word">Rooms</span><span class="menu__note">Thirty-two, all facing the water</span></a></li>
        <li><a class="menu__link" href="#" data-link><span class="menu__word">The Pool</span><span class="menu__note">Sixty metres, warm all winter</span></a></li>
        <li><a class="menu__link" href="#" data-link><span class="menu__word">Dining</span><span class="menu__note">Lunch by the water, dinner on the roof</span></a></li>
        <li><a class="menu__link" href="#" data-link><span class="menu__word">Spa</span><span class="menu__note">Open from seven until sundown</span></a></li>
        <li><a class="menu__link" href="#" data-link><span class="menu__word">Book a stay</span><span class="menu__note">From 240 dollars a night</span></a></li>
      </ul>
    </nav>

    <!-- the blind: the script cuts it into ivory slats; two ladder cords hold them -->
    <div class="blind" data-blind aria-hidden="true">
      <span class="blind__cord" style="--at: 2.6%"></span>
      <span class="blind__cord" style="--at: 97.4%"></span>
    </div>

    <!-- the top: above the blind and the menu. The button's icon is a little blind of three slats -->
    <div class="top" data-top>
      <button class="toggle" type="button" aria-expanded="false" aria-controls="menu" data-toggle data-autoclic>
        <span class="toggle__words" aria-hidden="true">
          <span class="toggle__word" data-word-open>Menu</span>
          <span class="toggle__word" data-word-close>Close</span>
        </span>
        <span class="sr" data-name>Open the menu</span>
        <span class="toggle__icon" aria-hidden="true"><i data-mini></i><i data-mini></i><i data-mini></i></span>
      </button>
    </div>
  </div>

  <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.

28 valori da cambiare

Apri il Playground

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 persiana» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una persiana di stecche orizzontali color avorio copre tutto lo schermo, tenuta da due cordini, ogni stecca un po’ arrotondata dalla luce e con un filo di luce sul bordo alto; in alto a destra c’è un pulsante scuro, Menu, la cui icona è una piccola persiana di tre stecche. All’arrivo le stecche si chiudono una dopo l’altra dall’alto. Premendo Menu le stecche ruotano in 3D di 80 gradi a scalinata, dalla prima in alto all’ultima in basso, ognuna con un piccolo rimbalzo, e restano strisce chiare quasi di taglio; dietro compare il menu verde petrolio, con le voci Rooms, The Pool, Dining, Spa e Book a stay in Bodoni grande distribuite su tutta l’altezza, una fessura sì e una no, ognuna con una piccola nota accanto (Thirty-two, all facing the water…). Il pulsante diventa chiaro, Menu diventa Close e la piccola persiana dell’icona gira con la grande. Sotto il puntatore una voce si fa arancio e scivola un poco a destra. Premendo Close, una voce o Esc le stecche si richiudono partendo dal basso. Col puntatore sopra la persiana chiusa le stecche vicine si inclinano verso di lui e fra loro s’intravede il menu; sopra la persiana aperta quelle vicine si mettono di taglio e liberano la vista.

Come funziona

Le stecche

Lo script divide l’altezza della finestra in stecche alte circa SLAT pixel. Ogni stecca ha due facce con backface-visibility: hidden, il davanti e il retro girato di 180 gradi, e tutte e due sono la stecca nuda: color avorio, con una sfumatura che la fa tonda e un filo di luce sul bordo alto. Ogni stecca è un filo più alta della sua parte, così fra due stecche chiuse non resta una fessura.

La scalinata a molle

Ogni stecca ha il suo angolo, la sua velocità e il momento in cui cambia l’angolo di riposo: aprendo, la stecca i lo cambia i per STAGGER secondi dopo; chiudendo si parte dall’ultima. L’angolo segue il riposo con una molla (SPRING) integrata a passi di 1/240 di secondo, con il passo del fotogramma limitato a 1/30: per questo ogni stecca va un po’ oltre e torna. Il transform è un rotateX scritto solo quando l’angolo cambia.

Le voci su tutta l’altezza

Le fessure si contano dall’alto: la fessura k sta fra la stecca k − 1 e la stecca k. Lo script mette ogni voce in una fessura con la variabile --row, una fessura sì e una no quando c’è spazio (una per fessura quando non c’è), centrate sull’altezza. Ogni voce è alta una stecca e comincia a metà di una, così a persiana aperta sta esattamente nello spazio libero, e compare quando la scalinata arriva alla sua fessura.

La luce sulle stecche

Sopra ogni faccia c’è un velo scuro la cui opacità viene dall’angolo della stecca: il davanti si scurisce un poco mentre si gira, il retro, che si vede oltre i 90 gradi, prende luce dall’alto. Una stecca aperta, vista quasi di taglio, è una striscia chiara col suo filo di luce.

Il puntatore

La distanza di ogni stecca dal puntatore, divisa per REACH, dà x; l’effetto è una campana, e^(−x²). Da chiusa la stecca ruota di LEAN · x · e^(−x²): in su sotto il puntatore e in giù sopra, così intorno a lui le fessure si aprono. Da aperta le stecche vicine vanno di taglio (90 gradi). Con un dito vale lo stesso trascinando sulla persiana.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SLAT`	script.js	`68`	L’altezza di una stecca in pixel (la finestra si divide in quante ne stanno).
`OPEN`	script.js	`80`	Di quanti gradi ruotano le stecche a persiana aperta (90 = di taglio).
`STAGGER`	script.js	`0.045`	I secondi fra una stecca e la successiva.
`SPRING`	script.js	`{ stiffness: 150, damping: 13 }`	La molla di ogni stecca: rigidità e smorzamento (meno smorzamento, più rimbalzo).
`LEAN`	script.js	`38`	Di quanti gradi si inclinano verso il puntatore le stecche vicine.
`REACH`	script.js	`170`	Fino a quanti pixel dal puntatore le stecche lo sentono.

Provali nel Playground

Quando usarla

Per il menu a tutta pagina di un hotel, di un ristorante, di uno studio di architettura o di interni, di un marchio di moda: dove il menu può nascondersi dietro una persiana che copre la pagina. Da tre a sei voci brevi.

Sul telefono

Le stecche sono un po’ più basse e le note accanto alle voci spariscono; le voci restano una fessura sì e una no finché c’è spazio. Senza puntatore, trascinando un dito sulla persiana le stecche vicine si inclinano lo stesso; il tocco sul pulsante apre e chiude.

Con il movimento ridotto

Le stecche non ruotano: la persiana intera sparisce in dissolvenza e lascia il menu, e chiudendo ricompare allo stesso modo. Niente scalinata all’arrivo e niente inclinazione sotto il puntatore.

Trappole

Con le stecche chiuse le parole del menu dietro brillavano attraverso le fessure larghe un capello fra una stecca e l’altra: le stecche sono un filo più alte della loro parte, e con la persiana chiusa e ferma il menu è nascosto.
Il pulsante cambiava colore al clic, ma chiudendo la stecca in alto è l’ultima a richiudersi e per un attimo il pulsante scuro stava sul verde scuro: cambia quando la prima stecca passa i 45 gradi.
Con l’asse di rotazione al centro della stecca, aprendo la metà di sopra va indietro e quella di sotto avanti: la perspective sul contenitore con il punto di vista un po’ sopra il centro dà stecche che si vedono di sotto in cima e di sopra in fondo, come una persiana vera.
Il pulsante sta sopra le stecche e il menu sotto: con la persiana aperta il contenitore delle stecche non deve prendere i clic (pointer-events: none), o le voci dietro non si possono premere.
Con una prospettiva vicina (1500 pixel) le stecche in basso, viste dall’alto, sporgevano sulla fessura e tagliavano le lettere di Book a stay: con 2800 pixel e il punto di vista al centro le parole restano intere.

Librerie

GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0, Hanken Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 4 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.