Il calendario a fogli

Calendari, 3D, SVGGSAPImpegnativaPeso compresso: Demo 7,5 KBGSAP 28 KBGratisScarica lo zip

Un calendario da muro su un fondo nero, un foglio color crema per ogni mese appeso a una spirale: girando pagina il foglio si alza in 3D sopra la spirale, scurendosi e mostrando il retro, e il giorno scelto si cerchia a mano con un pennarello rosso.

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 paper calendar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/opsz-italic.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <div class="calendar" data-calendar>
      <!-- the arrows (below the pad on screen, first for the Tab key) -->
      <div class="calendar__nav">
        <button class="calendar__arrow" type="button" aria-label="Previous month" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 15l6-6 6 6"/></svg></button>
        <button class="calendar__arrow" type="button" aria-label="Next month" data-next data-autoclic><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
      </div>

      <!-- the pad: a wire binding, the sheet of the month, and the edges of the sheets below.
           Turning a page, a copy of the sheet swings up over the binding in 3D while the new month waits underneath -->
      <div class="pad" data-pad>
        <div class="pad__sheets" data-sheets></div>
        <svg class="pad__wire" data-wire aria-hidden="true"></svg>
      </div>
      <p class="sr" role="status" aria-live="polite" data-said></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.

13 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 calendario a fogli» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un calendario da muro: un foglio color crema appeso a una spirale di metallo, con i bordi dei fogli sotto che spuntano in fondo. Sul foglio ci sono l’anno, il nome del mese in corsivo, le iniziali dei giorni e i numeri, con la domenica in rosso; sotto, due frecce. La freccia giù gira pagina: il foglio si alza ruotando intorno al suo bordo in alto, passa sopra la spirale scurendosi man mano che si allontana dalla luce, mostra il retro e svanisce, mentre il mese dopo aspetta sotto, nell’ombra del foglio che si alza. La freccia su riporta giù il foglio del mese prima sopra questo. Anche uno scorrimento del dito sul calendario gira pagina: verso l’alto avanti, verso il basso indietro. Sotto il puntatore un numero si alza e si inclina un poco. Premendo un giorno, un pennarello rosso lo cerchia a mano: un anello un po’ storto e tremolante che va un poco oltre il punto da cui è partito; scegliendo un altro giorno il cerchio vecchio si cancella tornando indietro. All’apertura il calendario scende dall’alto e il pennarello cerchia un giorno.

Come funziona

Il foglio

Ogni mese è una sezione disegnata dallo script: l’anno, il mese, le iniziali dei giorni da WEEK_START in poi e sei settimane di pulsanti. Sopra i giorni ci sono un SVG vuoto per l’inchiostro e un velo scuro per l’ombra. La spirale è un SVG ridisegnato sulla larghezza del calendario: un anello ogni 24 pixel circa, ognuno col suo buco nella carta e due fili.

La pagina che gira

Il foglio che si muove va in una scatola con transform-style: preserve-3d e il punto di rotazione sul bordo in alto, insieme a una faccia di retro girata di 180 gradi; tutte e due hanno backface-visibility: hidden. Un numero va da 0 a 180 gradi in FLIP secondi con power2.inOut e a ogni fotogramma diventa la rotationX della scatola. Il contenitore ha la prospettiva (DEPTH pixel) vista dal bordo in alto, così il foglio si alza verso di te.

Luce e ombra

Lo stesso numero scurisce il foglio che gira, con un velo che arriva a LIGHT a 90 gradi, e il foglio sotto, con LIGHT per 0,8 per il seno dell’angolo: l’ombra c’è finché il foglio è sollevato. Oltre i 120 gradi le due facce svaniscono, ognuna per conto suo.

Il pennarello

L’anello è un’ellisse di 72 punti un po’ inclinata, con un tremolio fatto da un seno e da un po’ di caso (WOBBLE), che fa 1,14 giri e si allarga un poco mentre gira. Il caso viene da un generatore col seme preso dalla data, così lo stesso giorno ha sempre lo stesso anello. Si disegna portando lo stroke-dashoffset dalla lunghezza del tratto a zero in INK secondi, e si cancella al contrario.

Tastiera e dito

Le frecce vengono prima del calendario nel codice (e sotto sullo schermo, con order), così il tasto Tab le trova per prime; poi un solo giorno prende il Tab: le frecce della tastiera si muovono fra i giorni, Pagina su e Pagina giù girano pagina, Invio cerchia. Col dito uno scorrimento di almeno 40 pixel gira pagina, e il tocco con cui finisce non sceglie nessun giorno.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WEEK_START`	script.js	`1`	Il primo giorno della settimana: 1 il lunedì, 0 la domenica.
`FLIP`	script.js	`1`	I secondi di una pagina che gira.
`LIGHT`	script.js	`0.35`	Quanto si scurisce un foglio che si allontana dalla luce, e l’ombra che getta su quello sotto.
`INK`	script.js	`0.6`	I secondi in cui il pennarello disegna un anello.
`WOBBLE`	script.js	`0.07`	Quanto trema la mano: 0 disegna un’ellisse perfetta.
`DEPTH`	script.js	`1600`	La prospettiva, in pixel: più è piccola, più il foglio viene verso di te.

Provali nel Playground

Quando usarla

Per la pagina degli eventi di un locale, di un teatro o di un festival, per un calendario dell’avvento o un conto alla rovescia: dove si guarda un mese alla volta e il calendario può essere anche un oggetto.

Sul telefono

Il calendario si stringe alla larghezza dello schermo e i tocchi scelgono i giorni come i clic. In più, uno scorrimento del dito verso l’alto gira pagina e verso il basso torna indietro.

Con il movimento ridotto

La pagina non gira: il mese nuovo compare sopra il vecchio in dissolvenza, in un quarto di secondo. Il pennarello non disegna, l’anello compare già fatto, e all’apertura il calendario è già al suo posto.

Trappole

L’opacità sulla scatola in 3D la appiattisce: il fronte si vedrebbe attraverso il retro, a specchio e scuro. Per questo la dissolvenza finale va sulle due facce, una per una, e mai sulla scatola.
Il foglio che gira è proprio quello di prima, spostato nella scatola: niente copie da tenere allineate. Tornando indietro è il foglio del mese prima che entra nella scatola già girato di 180 gradi e scende.
L’anello si disegna sulle misure del giorno dentro il foglio (offsetLeft, offsetTop), non sul rettangolo sullo schermo, che durante la rotazione è deformato dalla prospettiva; quando cambia la finestra lo si ridisegna.
Una pagina girata mentre l’altra gira ancora porta subito quella alla fine (progress(1)): due pagine in volo insieme si incastrerebbero.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,5 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.