Le storie a cubo
Storie, 3D, Transizioni
NuovaGratis
Tutti i componenti
Il carosello a leporello
I libri della collana tascabile di un piccolo editore, nello stile minimal: una sola striscia di carta piegata come un leporello, il libro a fisarmonica. La scheda al centro sta aperta e piatta, quelle verso i capi si piegano a zigzag, sempre più strette, fino a diventare una pila di strisce sottili segnate dai filetti delle pieghe. Trascinata o lanciata, la carta scorre: le schede si aprono arrivando al centro e si richiudono nella pila dall'altra parte, e la striscia si ferma con uno scatto misurato sulla scheda più vicina.
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 leporello carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the books of a small publisher's pocket series on one long strip of paper folded like a leporello: the card in
the middle lies open and flat, the ones towards the ends fold up in a zigzag, tighter and tighter, until they
are a stack of thin slivers. Dragged, thrown, the arrows or the keys pull the paper through: the cards open
as they reach the middle and fold back into the stack on the other side. The cards are made by the script -->
<section class="lep" role="region" aria-roledescription="carousel" aria-labelledby="lep-title" data-lep>
<header class="lep__head">
<h2 class="lep__title" id="lep-title">Tidelow Pocket Series</h2>
<div class="lep__arrows">
<button class="arrow" type="button" aria-label="Previous book" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg>
</button>
<button class="arrow" type="button" aria-label="Next book" data-next data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg>
</button>
</div>
</header>
<div class="lep__view" tabindex="0" aria-describedby="lep-help" data-view>
<span class="lep__shadow" aria-hidden="true" data-shadow></span>
<div class="lep__strip" data-strip></div>
</div>
<p class="sr" id="lep-help">Arrow keys to move along the series, Home and End for the first and the last book.</p>
<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.
67 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 carosello a leporello» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da solo al centro, il carosello della Tidelow Pocket Series: in alto il nome della collana in Fraunces e due pulsanti tondi con le frecce, fatti di un filetto sottile; sotto, nove schede color carta larghe 232 pixel e alte 318, stampate su una sola striscia piegata. Ogni scheda ha l'autore in maiuscoletto grigio, il titolo grande in Fraunces su due righe, poche parole sul libro, un filetto e sotto l'anno e il genere. La scheda al centro, Paper Harbour di Elif Demir, sta aperta e piatta, col titolo pieno e l'anno 1979 in vermiglio; le altre si piegano a zigzag, una verso di te e una lontano, sempre più strette verso i capi, finché le ultime sono strisce sottili dove si vede appena il titolo di sbieco e, sopra, l'angolo bianco del retro della carta. Le pieghe sono segnate da filetti, le schede girate lontano dalla luce sono un poco più scure e la carta fa un'ombra morbida sul tavolo. All'arrivo la striscia è un pacchetto chiuso e si apre dal centro verso i capi, una piega dopo l'altra, un filo oltre il suo posto e indietro. La freccia avanti porta la carta verso sinistra: la scheda al centro si piega e va nella pila, quella dopo si apre e si posa piatta, il titolo prende peso e perde morbidezza sugli assi del carattere e l'anno si accende. La striscia si trascina col mouse o col dito, si lancia e corre per inerzia; mentre corre le pieghe si aprono un poco, come una fisarmonica tirata, e quando si ferma si richiudono. Oltre i capi tira come un elastico. Col mouse sopra una scheda piegata quella si apre un poco e spinge in là la pila; un clic ci va. Con la striscia selezionata funzionano le frecce della tastiera, Home e End, e una cornice sottile segna la scheda aperta.
Come funziona
Una piega per ogni scheda
La striscia è un numero solo, p: la scheda al centro come frazione. Ogni scheda prende la sua piega dalla distanza d = i − p, con una campana rovesciata: FOLD · (1 − e^(−(d/SPREAD)²)). Al centro è zero, a metà strada fra due schede le due vicine sono a una trentina di gradi ciascuna, a una scheda di distanza già oltre i 70 e più in là quasi chiuse a FOLD. Il segno si alterna con la scheda, come le pieghe vere della carta: una a monte e una a valle, e non cambiano mai mentre la striscia scorre.
La catena: la carta non si strappa
Ogni scheda è un elemento con transform-origin sul bordo sinistro, la piega che divide con quella prima. A ogni fotogramma lo script costruisce la catena: la scheda i comincia dove finisce la i − 1, e finisce W·cos φ più a destra e W·sin φ più in fondo. Poi sposta tutto in modo che il centro della scheda a p stia al centro della vista e alla sua profondità vera: translate3d(x, 0, z) rotateY(φ) su elementi fratelli dentro un contenitore preserve-3d, così il browser li mette in ordine di profondità da solo.
La luce e il retro
La normale di una scheda girata di φ è (sin φ, cos φ): il prodotto con la direzione della luce, davanti e un po' a sinistra, dice quanto scurire il fronte (SHADE), e il contrario il retro, una seconda faccia girata di 180 gradi con backface-visibility nascosta. La camera guarda un poco dall'alto (perspective-origin sopra la striscia): le schede che vengono verso di te scendono, quelle che vanno via salgono, e lo zigzag si legge sui bordi di sopra. L'ombra sul tavolo è larga quanto la carta proiettata con la prospettiva.
Molle, inerzia e uno scatto misurato
Una molla porta p alla scheda scelta, a = ω²·(meta − p) − 2ζω·v con ω e ζ da GLIDE, divisa per la radice della distanza per i salti lunghi. Col dito la striscia insegue il puntatore su una molla rigida; lasciata, prende la velocità degli ultimi 90 millisecondi, guarda dove arriverebbe in THROW secondi e si aggancia lì. Una carta lanciata forte volerebbe oltre la sua scheda: tiene solo la velocità che la molla riesce a fermare in tempo, così arriva sempre con lo stesso pixel di troppo. La velocità apre le pieghe di BREATHE su una molla sua, e il mouse sopra una scheda piegata la apre di PEEK.
Il carattere che lavora
Fraunces ha gli assi del peso, della morbidezza (SOFT) e della misura ottica. La planarità di ogni scheda, 1 − |φ| / FOLD, alla terza potenza, dà il peso del titolo (da 330 a 560) e toglie morbidezza: chiuso nella pila il titolo è leggero e tondo, aperto al centro è pieno e netto. Le righe dei titoli sono scritte a mano e non vanno mai a capo, così il peso che cambia non sposta niente. L'anno passa dal grigio al vermiglio con color-mix e una variabile --lit.
Il pacchetto che si apre, il telefono
All'arrivo ogni scheda ha un'apertura da 0 a 1, una molla di GSAP con back.out: la piega va da FOLD a quella del suo posto, prima la scheda al centro e poi le vicine, 70 millisecondi l'una. Quando niente si muove il ciclo si spegne. Sul telefono le schede scendono a 196 per 276 e la striscia arriva ai bordi dello schermo; il dito trascina e lancia (su e giù scorre la pagina), e un dito su una scheda piegata la apre come il mouse.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BOOKS | script.js | [['Small|Weathers', 'Ada Linwood', '1987', 'Poems for the hour before the rain.', 'Poems'], …] | I libri della collana: titolo (la sbarra | va a capo), autore, anno, poche parole, genere. |
START | script.js | 3 | Il libro aperto al centro quando si apre la pagina, contando da 0. |
FOLD | script.js | 86 | La piega più stretta, in gradi: quella delle pile ai due capi (90 sarebbe chiusa del tutto). |
SPREAD | script.js | 0.72 | Quanto in fretta la carta si piega lontano dal centro, in schede: più grande, pieghe più dolci e striscia più larga. |
BREATHE | script.js | 0.15 | Quanto si aprono le pieghe mentre la striscia corre: 0 per niente. |
PEEK | script.js | 0.22 | Quanto si apre una scheda piegata sotto il puntatore o il dito. |
GLIDE | script.js | [7, 0.8] | La molla della striscia: quanto in fretta arriva a una scheda e quanto è frenata (sotto 0,7 va oltre di più). |
THROW | script.js | 0.24 | I secondi che una striscia lanciata corre ancora prima di essere presa (quanto va lontano un lancio). |
SHADE | script.js | 0.13 | Quanto si scurisce una scheda girata lontano dalla luce. |
--card-w | style.css | 232px | La larghezza di una scheda (196 sul telefono). |
--card-h | style.css | 318px | L'altezza di una scheda (276 sul telefono). |
Quando usarla
Per la collana di un editore o di una libreria, le mostre di una galleria, i numeri di una rivista, i menu stagionali di un ristorante, le camere di un piccolo albergo o i progetti di un portfolio: dove ogni cosa è un foglio con un titolo e poche righe, e il gesto di sfogliare un libro a fisarmonica dice già qualcosa del sito. Sta bene con sei-dodici schede su un fondo chiaro; colori, misure e testi si cambiano nelle variabili.
Sul telefono
Le schede scendono a 196 pixel per 276 e la striscia arriva ai bordi dello schermo, sfumando solo nei margini: al centro la scheda aperta, ai lati le pieghe e l'inizio delle pile. Il dito trascina e lancia la striscia (su e giù scorre la pagina), un dito su una scheda piegata la apre un poco come il mouse e un tocco ci va; i pulsanti sono di 42 pixel.
Con il movimento ridotto
La carta non scorre: la vista si dissolve e ricompare già sulla scheda nuova, con le pieghe già al loro posto. Niente pacchetto che si apre all'arrivo (il componente entra in dissolvenza), niente pieghe che respirano e niente schede che si aprono sotto il mouse; trascinando la striscia non segue la mano, e lasciandola va avanti o indietro di una scheda in dissolvenza. Il titolo della scheda aperta resta pieno e l'anno vermiglio.
Trappole
- Con la camera all'altezza della striscia la catena sembrava un coverflow qualsiasi: lo zigzag non si leggeva. Guardando un poco dall'alto (perspective-origin al -30%) le schede che vengono avanti scendono e quelle che vanno via salgono, e i bordi di sopra disegnano le pieghe.
- Con la prima curva le schede a una distanza dal centro restavano a 50 gradi, e quella che veniva verso di te, ingrandita dalla prospettiva, sembrava aperta quanto quella del centro. La curva ora è più ripida (oltre 70 gradi a una scheda) e la prospettiva più lunga (nove volte la larghezza di una scheda).
- La dissolvenza del movimento ridotto, fatta sulla striscia, la schiacciava in piano per un attimo: l'opacità su un elemento preserve-3d spegne il 3D. Si dissolve la vista, che ha solo la prospettiva.
- Lanciata forte verso l'ultima scheda, la striscia volava oltre la fine e tornava: la molla con una velocità iniziale grande va oltre di molto. Al rilascio la velocità verso la meta si taglia a quella che la molla riesce a fermare (ω per la distanza), così l'arrivo ha lo stesso pixel di troppo di un passo solo.
- La velocità che apriva le pieghe le spalancava a ogni passo, e per un attimo c'erano due schede piatte al centro: BREATHE è sceso a 0,15 e conta la velocità fino a 5 schede al secondo.
- L'ombra sul tavolo era larga quanto la catena senza prospettiva e sporgeva oltre la carta: ora i capi si proiettano con x · P / (P − z).
Librerie
GSAP 3.15.0, Fraunces (font variabile, con gli assi del peso, della morbidezza e della misura ottica) 5.3.0, Archivo (font variabile, con l'asse della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
