Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
Il libro che si apre allo scroll
Scorri dentro l’anteprima
Animazione di scroll in 3D nello stile minimal, per la pagina di un piccolo editore inventato: un libro rilegato in tela, chiuso sul tavolo, si apre mentre scendi. La copertina gira sulla sua cerniera e si posa a sinistra, poche pagine sottili la seguono una dopo l’altra curvandosi, e alla fine il libro è aperto sulla prima frase del primo capitolo. Il solo colore è il nastro segnalibro 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The book that opens on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up publisher, Bramble Press. The stage sticks while you scroll: a closed clothbound book lies on the table,
the cover swings open on its hinge, a few thin pages fan over one after another, and the book ends open flat on a
page with one short sentence. Scroll back up and it closes again. Book, pages and shadows are placed by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#" data-entra>Bramble Press</a>
<p class="testa__nota" data-entra>The autumn list</p>
</header>
<div class="scena" data-scena aria-hidden="true">
<div class="ombra" data-ombra></div>
<div class="libro" data-libro>
<!-- the back cover and the block of pages, with the fore-edge and the tail showing the stacked paper -->
<div class="dorso-retro faccia"></div>
<div class="blocco faccia" data-blocco>
<div class="pagina-base">
<p class="pagina-base__capitolo" data-cap>Chapter one</p>
<p class="pagina-base__frase" data-frase>Some stories wait for the right page.</p>
<span class="pagina-base__ombra" data-ombra-pagina></span>
</div>
<div class="nastro" data-nastro></div>
</div>
<div class="taglio taglio--piede faccia" data-taglio-piede></div>
<div class="taglio taglio--davanti faccia" data-taglio-davanti></div>
<div class="pagine" data-pagine></div>
<!-- the cover: cloth outside with the title pressed in, endpaper inside -->
<div class="copertina" data-copertina>
<div class="copertina__fuori faccia">
<span class="copertina__titolo">Small<br>Hours</span>
<span class="copertina__autore">M. Arden</span>
<span class="copertina__luce" data-luce-cop></span>
</div>
<div class="copertina__dentro faccia">
<span class="copertina__ex">Bramble Press</span>
<span class="copertina__luce" data-luce-dentro></span>
</div>
<div class="copertina__spessore faccia"></div>
</div>
</div>
</div>
<p class="sr-only">Small Hours, by M. Arden. Chapter one: Some stories wait for the right page.</p>
<p class="cenno" data-entra><span data-cenno>Scroll to open the book</span></p>
</div>
</section>
<section class="dopo">
<p class="dopo__testo">Small Hours is out in November, clothbound, 212 pages.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
31 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 libro che si apre allo scroll» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di un piccolo editore inventato, Bramble Press, e la scritta del catalogo d’autunno. Al centro, sul tavolo, c’è un libro chiuso visto dall’alto e di fronte: la copertina di tela beige con il titolo Small Hours impresso a secco e il nome dell’autore, il taglio delle pagine che si vede lungo il bordo in basso e a destra, e un nastro segnalibro rosso che spunta sotto. All’apertura il libro si posa sul tavolo con la sua ombra morbida. Scendendo la pagina resta ferma e il libro si apre: la copertina si alza sulla cerniera del dorso, si scurisce mentre sta in piedi, passa oltre e si posa a sinistra mostrando il risguardo col nome dell’editore. Poi sette pagine sottili la seguono una dopo l’altra: ognuna si stacca dal mucchio, si solleva un poco, si curva col bordo libero che resta indietro, getta un’ombra sulla pagina sotto e si posa a sinistra, appena sfalsata dalle altre. Intanto il libro scivola perché alla fine la doppia pagina sia al centro, si gira e si abbassa un poco, e il nastro ondeggia mentre le pagine gli passano sopra. Sull’ultima pagina compaiono Chapter one e la prima frase, Some stories wait for the right page., che prende peso mentre arriva. Risalendo il libro si richiude. Il puntatore inclina il libro di qualche grado su una molla, e un clic solleva l’angolo della pagina di sopra.
Come funziona
Un libro di facce piatte
Il libro è un div con transform-style: preserve-3d, inclinato all’indietro con rotateX come se stesse sul tavolo. Dentro ci sono facce piatte messe nello spazio: il retro della copertina a z zero, il blocco delle pagine a z uguale allo spessore, i due tagli del blocco girati di 90 gradi con rotateX e rotateY, e la copertina in cima, con la faccia di tela e il risguardo girato di 180 gradi e backface-visibility nascosta.
La cerniera
La copertina e ogni pagina hanno transform-origin sul bordo del dorso e girano con rotateY da 0 a meno 180 gradi. Mentre girano si alzano di un poco, col seno dell’avanzamento, e passano dalla loro quota sul mucchio di destra a quella sul mucchio di sinistra, così la prima pagina girata resta sotto a sinistra come in un libro vero.
La pagina che si curva
Ogni pagina è fatta di cinque strisce, ognuna figlia della precedente e girata di qualche grado in più: le rotazioni si sommano e la pagina si curva. La curva cresce a metà del giro e torna a zero quando la pagina si posa, così da piatta torna piatta.
Tutto da una sola timeline
Una timeline di ScrollTrigger con lo scrub porta un numero solo da 0 a 1; a ogni fotogramma lo script calcola da quel numero la copertina, ogni pagina con la sua finestra di scroll, le ombre, la luce sulle facce, lo scivolamento del libro e la frase finale. Lenis ammorbidisce lo scroll.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PAGES | script.js | 7 | Quante pagine sottili girano dopo la copertina (da 2 a 14). |
SIZE | script.js | 1 | Quanto è grande il libro (1 = sta nello schermo). |
CURL | script.js | 14 | Quanto si curva una pagina mentre gira, in gradi per striscia. |
LIFT | script.js | 0.07 | Quanto si alza una pagina che gira, in parti della larghezza della pagina. |
TILT | script.js | [56, 40] | Quanto è inclinato all’indietro il libro all’inizio e alla fine, in gradi. |
TURN | script.js | [-9, -2] | Quanto è girato il libro sul tavolo all’inizio e alla fine, in gradi. |
FAN | script.js | 0.8 | Quanto si aprono a ventaglio le pagine girate a sinistra, in gradi. |
SMOOTH | script.js | 0.7 | Quanto morbido il libro segue lo scroll, in secondi (0 = attaccato). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
Quando usarla
Per la pagina di una casa editrice, di una libreria, di un romanzo o di una rivista in carta; per il lancio di un libro o di un catalogo; e in generale per un prodotto da aprire piano mentre si scende.
Sul telefono
La stessa animazione con le misure adattate: il libro è misurato sia sulla larghezza sia sull’altezza della casella, così la doppia pagina aperta sta dentro col margine, e la frase finale è proporzionata alla pagina.
Con il movimento ridotto
Niente scroll ammorbidito e niente pagine che girano: compare in dissolvenza direttamente il libro aperto sulla prima frase.
Trappole
- Le pagine girate tenevano la loro quota del mucchio di destra e a sinistra finivano impilate al contrario: la prima girata stava sopra. La quota va spostata dal mucchio di destra a quello di sinistra mentre la pagina gira.
- Una pagina fatta di strisce con un’ombra diversa per striscia sembra a bande: l’ombra deve essere quasi uguale su tutte le strisce, e le strisce si sovrappongono di un pixel e mezzo perché fra loro non passi luce.
- overflow: hidden su un contenitore appiattisce il 3D di tutto quello che ha dentro: va messo solo sulle facce finali, mai sui gruppi.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 24 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.
