Il menu da sfogliare

Libri, 3D, TransizioniGSAPImpegnativaPeso compresso: Demo 7,7 KBGSAP 28 KBGratisScarica lo zip

Il menu di un'osteria come un libretto: la pagina si gira prendendola per il bordo, che segue il dito attorno alla costola in 3D; si scurisce mentre si alza e getta la sua ombra sulla pagina sotto, e lasciata oltre metà si gira da sola, altrimenti ricade. Al computer è aperto su due pagine, al telefono si sfoglia una pagina alla volta.

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 menu to leaf through</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/eb-garamond@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the menu to leaf through: a page turned by its edge follows the finger round the spine, darkens as it rises
         and throws its shadow on the page below; let go past the middle it turns over, otherwise it falls back -->
    <section class="menu" aria-label="The osteria's menu" data-menu data-autoclic>
      <div class="book" tabindex="0" aria-roledescription="book" data-book>
        <div class="book__shade book__shade--left" aria-hidden="true" data-shade-left></div>
        <div class="book__shade book__shade--right" aria-hidden="true" data-shade-right></div>
      </div>
      <nav class="leaf" aria-label="Pages">
        <button class="leaf__btn" type="button" aria-label="Previous page" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6l-6 6 6 6"/></svg></button>
        <p class="leaf__where"><span class="roll" data-where></span></p>
        <button class="leaf__btn" type="button" aria-label="Next page" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
      </nav>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco il menu dell'Osteria La Lanterna, chiuso: una copertina verde con una lanterna disegnata in oro, che appena arrivata si apre di uno spiraglio e ricade; sotto, le frecce e il nome delle pagine. Prendendo il bordo della pagina di destra e trascinandolo verso sinistra la pagina si alza attorno alla costola e il suo bordo resta sotto il dito; mentre si alza si scurisce, sulla pagina sotto compare la sua ombra, e oltre metà si vede il suo retro con la pagina seguente. Lasciata oltre il mezzo, o con un colpo veloce, la pagina finisce di girarsi; prima, ricade al suo posto con un piccolo rimbalzo. Il libro aperto scivola in mezzo con la costola al centro: Antipasti e Primi, Secondi e Dolci, Vini e un Grazie con gli orari della cucina, e il nome sotto il libro rotola a ogni pagina. Col mouse vicino al bordo l'angolo si alza un poco, come per invitare a girarlo. Al telefono si vede una pagina alla volta, e la pagina girata svanisce nella costola.

Come funziona

Fogli con due facce

Ogni foglio è appeso alla costola (transform-origin sul bordo sinistro) e ha due facce: davanti e dietro, girato di 180 gradi, entrambe con backface-visibility hidden; il foglio ha transform-style preserve-3d e la prospettiva sta sul libro. Aperto su due pagine un foglio porta la pagina di destra davanti e quella di sinistra dietro; una pagina alla volta, porta una pagina sola e un retro bianco.

Il bordo sotto il dito

L'angolo del foglio è quello la cui proiezione sul tavolo arriva al puntatore: −acos(distanza dalla costola / larghezza della pagina). Così il bordo resta sotto il dito; un tween di 0,18 secondi lo porta lì, perché un foglio preso dalla costola si apra senza salti.

Luce e ombra

Su ogni faccia c'è un velo scuro la cui opacità è il seno dell'angolo: nullo con la pagina distesa, pieno di taglio. Sulla pagina sotto cade un'ombra che parte dalla costola, a destra finché il foglio si alza e a sinistra quando scende dall'altra parte.

Lasciare, toccare, girare

Lasciato oltre il mezzo, o con un colpo più veloce di FLICK pixel al secondo, il foglio va a −180 o a 0; altrimenti torna indietro con back.out. Un tocco a destra gira avanti, a sinistra indietro. Al telefono il dito non passa la costola, quindi basta arrivare a due terzi del giro, e oltre la costola il foglio svanisce. Le pagine girate stanno a sinistra con lo z-index che cresce, quelle da girare a destra con lo z-index che cala, e il foglio in movimento sopra tutti.

Il libro chiuso, i tasti e l'anteprima

Chiuso, il libro si sposta di mezza pagina perché la copertina stia al centro, e aprendosi torna con la costola in mezzo. Le frecce sotto il libro e quelle della tastiera girano le pagine, Home e Fine vanno all'inizio e alla fine; col mouse vicino al bordo l'angolo si alza di LIFT gradi. Un clic da script (l'anteprima della libreria) gira la pagina dopo e, alla fine, chiude il libro pagina dopo pagina.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PLACE`	script.js	`['Osteria', 'La Lanterna']`	Il nome sulla copertina, in due righe.
`PAGES`	script.js	`[['cover'], ['Starters', 'Antipasti', [['Bruschetta', 'Tomatoes, basil, new oil', 7], …]], …, ['thanks']]`	Le pagine: il nome sotto il libro, il titolo sulla pagina e i piatti (nome, cosa c'è dentro, prezzo); cover e thanks sono la copertina e l'ultima pagina.
`TURN`	script.js	`0.75`	I secondi che una pagina impiega a girarsi da sola.
`LIFT`	script.js	`8`	I gradi di cui l'angolo si alza sotto il mouse.
`FLICK`	script.js	`700`	La velocità, in pixel al secondo, che gira una pagina anche prima del mezzo.

Provali nel Playground

Quando usarla

Per il menu di un ristorante o di un agriturismo, la carta dei vini, un catalogo, una brochure, un libretto di nozze, una rivista: qualunque cosa che si legga meglio sfogliandola.

Sul telefono

Sotto i 640 pixel il libro mostra una pagina alla volta, larga fino a 360 pixel: il dito la gira verso la costola, da destra a sinistra, e la riporta indietro partendo dal suo terzo sinistro; la pagina non fa scorrere lo schermo (touch-action none sul libro).

Con il movimento ridotto

Le pagine si girano subito, coi pulsanti, coi tasti e lasciando il dito (che mentre trascina muove ancora la pagina); l'angolo non si alza col mouse e niente entrata.

Trappole

Le due facce vogliono backface-visibility hidden (in Safari anche col prefisso -webkit-) e il foglio transform-style preserve-3d; la prospettiva va sul genitore, non sul foglio.
Un angolo proporzionale allo spostamento fa scappare la pagina dal dito: l'angolo giusto viene dall'arcocoseno della distanza dalla costola.
Al telefono il dito non può passare la costola e i 90 gradi non si raggiungono mai: lì la soglia per girare deve essere più bassa.
Una pagina alla volta non c'è la pagina di sinistra: i retri non si vedrebbero mai, quindi lì ogni pagina sta sul davanti di un foglio suo.
L'ordine dei fogli cambia mentre si sfoglia: z-index crescente a sinistra, calante a destra, il foglio che si muove sopra a tutti, e la pila rimessa in ordine quando si posa.

Librerie

GSAP 3.15.0, EB Garamond (font variabile) 5.3.0.

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

Collaudo

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