Otturatore a colonne
Transizioni
NuovaGratis
Torna alla libreria
La rivista che si sfoglia
Una rivista inventata, con titoli grandi e illustrazioni disegnate: con un clic, o prendendo la pagina per l'angolo, la pagina si gira arricciandosi davvero. Si piega lungo una linea che segue il dito, mostra il retro, si scurisce verso la piega e getta l'ombra sulla pagina sotto. Il puntatore vicino all'angolo lo solleva appena.
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 magazine to leaf through</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/fraunces@5.3.0/full-italic.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>
<main class="stage">
<!-- the magazine to leaf through: click a page or drag a corner and the page turns with a real curl,
its back showing, the fold shaded and its shadow falling on the page below -->
<section class="mag" aria-label="Loam, a magazine of slow places" data-mag>
<div class="book" tabindex="0" aria-roledescription="magazine" data-book>
<div class="base base--left" aria-hidden="true" data-base-left></div>
<div class="base base--right" aria-hidden="true" data-base-right></div>
<!-- the pages, in reading order: each sheet carries two of them, front and back -->
<article class="pg pg--cover" data-page data-autoclic data-name="Cover">
<p class="cover__mast" data-in>Loam</p>
<p class="cover__tag" data-in>A magazine of slow places</p>
<svg class="art" viewBox="0 0 100 134" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<circle class="c-ochre" cx="76" cy="68" r="14" data-pop/>
<path class="c-olive" d="M0 96c18-10 34-12 52-6s34 4 48-4v48H0z"/>
<path class="c-terra" d="M0 108c22-8 40-6 58 0s30 6 42 0v26H0z"/>
<path class="c-ink" d="M86 102v-16" stroke-width="1.4"/>
<circle class="c-deep" cx="86" cy="81" r="7" data-pop/>
<circle class="c-deep" cx="81" cy="86" r="4.4" data-pop/>
<circle class="c-deep" cx="91" cy="86" r="4.8" data-pop/>
<path class="c-line" d="M56 50l3 2 3-2M64 44l2.4 1.6 2.4-1.6"/>
</svg>
<div class="cover__lines">
<p class="cover__issue" data-in>Autumn issue</p>
<p data-in>The orchard that outlived its town</p>
<p data-in>Bread at four in the morning</p>
<p data-in>Rivers, slowly</p>
</div>
</article>
<article class="pg" data-page data-name="Contents">
<p class="kicker" data-in>Inside</p>
<h2 class="title title--mid" data-in>This autumn, we stayed put</h2>
<div class="toc">
<div class="toc__row" data-in><p class="toc__sec">Feature</p><p class="toc__name">The orchard that outlived its town</p><p class="toc__what">Forty trees and the people who still pick them.</p></div>
<div class="toc__row" data-in><p class="toc__sec">Kitchen</p><p class="toc__name">Bread at four in the morning</p><p class="toc__what">A night with the last baker on the hill.</p></div>
<div class="toc__row" data-in><p class="toc__sec">Places</p><p class="toc__name">Rivers, slowly</p><p class="toc__what">Following water at walking pace.</p></div>
</div>
<svg class="leaf" viewBox="0 0 40 40" aria-hidden="true" data-pop><path class="c-terra" d="M8 32C8 16 18 8 34 6c0 16-8 26-26 26z"/><path class="c-line" d="M8 32L26 14"/></svg>
</article>
<article class="pg" data-page data-autoclic data-name="Letter">
<p class="kicker" data-in>From the editors</p>
<h2 class="title title--big" data-in>Go slower than the weather</h2>
<div class="body body--cols" data-in>
<p class="drop">We meant to travel far this season. Instead we walked to the end of the lane and found more than we could write about. An orchard that nobody owns and everybody tends. A bakery whose lights come on before the birds. A river that takes a whole afternoon to cross a valley.</p>
<p>None of it is new, and that is the point. The places in this issue have kept their own time while the rest of us hurried. We sat with them long enough to hear it.</p>
<p>Read it slowly. Turn the pages by the corner, the way paper likes to be turned.</p>
</div>
<p class="sign" data-in>The editors</p>
</article>
<article class="pg pg--art" data-page data-name="The orchard">
<svg class="art" viewBox="0 0 100 134" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect class="c-sky" width="100" height="134"/>
<circle class="c-ochre" cx="78" cy="22" r="9" data-pop/>
<path class="c-olive" d="M0 70c20-6 40-6 60-2s30 2 40-2v68H0z"/>
<path class="c-ink" d="M22 96V78M52 92V72M80 98V80" stroke-width="2"/>
<circle class="c-deep" cx="22" cy="70" r="12" data-pop/>
<circle class="c-deep" cx="52" cy="64" r="13" data-pop/>
<circle class="c-deep" cx="80" cy="72" r="11" data-pop/>
<g class="c-terra">
<circle cx="17" cy="66" r="1.8" data-pop/><circle cx="26" cy="73" r="1.8" data-pop/><circle cx="21" cy="62" r="1.6" data-pop/>
<circle cx="47" cy="60" r="1.8" data-pop/><circle cx="57" cy="66" r="1.9" data-pop/><circle cx="50" cy="70" r="1.6" data-pop/>
<circle cx="76" cy="69" r="1.7" data-pop/><circle cx="85" cy="74" r="1.8" data-pop/>
</g>
<path class="c-ochre" d="M0 104c30-6 60-6 100 0v30H0z"/>
<path class="c-line" d="M60 120l8-36M66 120l8-36M61 112h6M62 104h6.6M64 96h6.6M65.6 88h6.6"/>
<path class="c-terra" d="M30 112h14l-2 9H32z" data-pop/>
</svg>
<p class="caption" data-in>Picking season, early October</p>
</article>
<article class="pg" data-page data-autoclic data-name="The orchard">
<p class="kicker" data-in>Feature</p>
<h2 class="title title--huge" data-in>The orchard that outlived its town</h2>
<p class="stand" data-in>The factory closed, the school closed, the bus stopped coming. The apple trees kept going.</p>
<div class="body body--cols" data-in>
<p>Nobody remembers who planted the first row. The deeds were lost in a flood, and the land has belonged to whoever turns up with a ladder ever since.</p>
<p>Every October they do. A retired teacher, two brothers from the coast, a family who drive four hours with empty crates. They prune, they argue about which tree is sweetest, they leave a basket by the gate for anyone passing.</p>
</div>
<blockquote class="quote" data-in>Nobody owns it, so everybody looks after it.</blockquote>
</article>
<article class="pg" data-page data-name="Bread at four">
<p class="kicker" data-in>Kitchen</p>
<h2 class="title title--big" data-in>Bread at four in the morning</h2>
<div class="body body--cols" data-in>
<p class="drop">The oven is older than the house around it. It takes three hours to warm, so the baker lights it at one and sleeps on a bench until the bricks tick.</p>
<p>By four the dough has doubled in its linen. She shapes forty loaves by feel, in the dark, and the first customers knock before the crust has stopped singing.</p>
</div>
<div class="box" data-in>
<p class="box__head">You need</p>
<p>Flour, water, salt, and a whole night of patience.</p>
</div>
</article>
<article class="pg pg--art pg--night" data-page data-autoclic data-name="Bread at four">
<svg class="art" viewBox="0 0 100 134" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect class="c-night" width="100" height="134"/>
<circle class="c-paper" cx="74" cy="24" r="8" data-pop/>
<circle class="c-night" cx="78" cy="21" r="7"/>
<path class="c-brick" d="M14 112V74a36 30 0 0 1 72 0v38z"/>
<path class="c-glow" d="M30 112V88a20 16 0 0 1 40 0v24z" data-pop/>
<path class="c-line-light" d="M14 84h72M14 96h16M70 96h16M22 74v10M78 74v10M50 44v14"/>
<ellipse class="c-loaf" cx="34" cy="120" rx="10" ry="5" data-pop/>
<ellipse class="c-loaf" cx="56" cy="121" rx="11" ry="5.4" data-pop/>
<ellipse class="c-loaf" cx="76" cy="119" rx="9" ry="4.6" data-pop/>
<path class="c-line-light" d="M30 118l3-2M53 119l3-2M73 117l3-2"/>
<path class="c-steam" d="M44 40c-3-4 3-6 0-10s3-6 0-10M56 40c-3-4 3-6 0-10s3-6 0-10" data-pop/>
</svg>
<p class="caption caption--light" data-in>The oven, lit at one</p>
</article>
<article class="pg pg--art pg--river-left" data-page data-name="Rivers, slowly">
<svg class="art" viewBox="0 0 100 134" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">
<rect class="c-sky" width="100" height="134"/>
<path class="c-olive" d="M0 74c24-10 50-8 76-2s20 4 24 4v58H0z"/>
<path class="c-river" d="M0 100c18-4 34 6 52 2s34-14 48-10v42H0z"/>
<path class="c-line-light" d="M8 110c6-2 10 0 16-1M36 118c6-2 10 0 16-1M60 104c6-2 10 0 14-1"/>
<path class="c-deep" d="M14 76l5-14 5 14zM28 72l4-11 4 11z" data-pop/>
</svg>
<p class="kicker kicker--over" data-in>Places</p>
<h2 class="title title--huge title--over" data-in>Rivers, slowly</h2>
</article>
<article class="pg pg--art pg--river-right" data-page data-autoclic data-name="Rivers, slowly">
<svg class="art" viewBox="0 0 100 134" preserveAspectRatio="xMinYMid slice" aria-hidden="true">
<rect class="c-sky" width="100" height="134"/>
<circle class="c-ochre" cx="70" cy="40" r="10" data-pop/>
<path class="c-olive" d="M0 76c10 0 30-6 50-4s34 6 50 2v60H0z"/>
<path class="c-river" d="M0 92c14-4 28 4 44 6s36-2 56 2v34H0z"/>
<path class="c-line-light" d="M10 104c6-2 10 0 16-1M40 112c6-2 10 0 16-1M70 106c6-2 10 0 14-1"/>
<path class="c-terra" d="M30 96h18l-4 4H34z" data-pop/>
<path class="c-ink" d="M39 96V84" stroke-width="0.8"/>
</svg>
<div class="card" data-in>
<p>We walked the river from its spring to the sea, never faster than the water. It took eleven days. The best hour was the one we spent doing nothing on a stone.</p>
</div>
</article>
<article class="pg pg--back" data-page data-name="Back cover">
<p class="back__mast" data-in>Loam</p>
<svg class="art art--small" viewBox="0 0 100 70" aria-hidden="true">
<path class="c-paper" d="M0 50c24-12 48-14 72-6s20 4 28 2v24H0z"/>
<path class="c-ink" d="M58 44v-8" stroke-width="1.2"/>
<path class="c-paper" d="M51 38l7-14 7 14z" data-pop/>
<circle class="c-paper" cx="24" cy="18" r="2" data-pop/><circle class="c-paper" cx="40" cy="10" r="1.4" data-pop/><circle class="c-paper" cx="80" cy="16" r="1.8" data-pop/>
</svg>
<p class="back__next" data-in>Next: Winter, the quiet issue</p>
<svg class="code" viewBox="0 0 40 16" aria-hidden="true"><path d="M2 0v16M4 0v16M7 0v16M8.4 0v16M11 0v16M14 0v16M15.4 0v16M18 0v16M21 0v16M22.4 0v16M25 0v16M27 0v16M30 0v16M31.4 0v16M34 0v16M37 0v16M38.4 0v16"/></svg>
</article>
</div>
<p class="where" aria-hidden="true"><span class="where__roll" data-where>Cover</span></p>
<p class="hint">Click a page, or drag it by the corner</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.
65 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 «La rivista che si sfoglia» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco arriva Loam, una rivista inventata sui posti lenti: cade appena inclinata e si posa con un piccolo rimbalzo, il titolo e le righe di copertina salgono una dopo l'altra, il sole e l'albero si gonfiano con un elastico e l'angolo in basso si alza un poco, come per invitare a girarlo, poi ricade con un fremito. Con un clic la copertina si gira: l'angolo si alza in un arco, la pagina si piega lungo una linea che corre verso la costola e mostra il suo retro, la piega ha un riflesso di luce e un'ombra, e sulla pagina che si scopre cade l'ombra di quella che si gira. Intanto la rivista scivola in mezzo, con la costola al centro. Le pagine che si scoprono si animano: le parole salgono, le mele, il sole, i pani e la barca si gonfiano. Dentro ci sono il sommario e la lettera della redazione, un frutteto disegnato a tutta pagina con l'articolo accanto, il forno di notte e un fiume che attraversa due pagine; in fondo la quarta di copertina, verde. Sotto la rivista il nome della pagina rotola a ogni giro. Prendendo una pagina per l'angolo e trascinandola, la piega segue il dito; lasciata oltre metà, o con un colpo veloce, finisce di girarsi, altrimenti torna al suo posto. All'ultima pagina un clic richiude la rivista, con le pagine che tornano indietro una dopo l'altra.
Come funziona
Una piega, non una rotazione
La pagina non gira attorno alla costola come una porta: si piega. L'angolo C viene portato nel punto P (dove c'è il dito), e la piega è l'asse del segmento CP: la retta che passa per il punto medio, perpendicolare a CP. Tutto si calcola come se il foglio stesse a destra; per un foglio a sinistra le x si specchiano (2W − x). Due vincoli tengono la carta intera: l'angolo resta entro una pagina di distanza dalla costola sul suo bordo, ed entro una diagonale dalla costola sul bordo opposto.
Due facce ritagliate
Ogni foglio ha due pagine, davanti e dietro, ognuna in un suo strato grande quanto la rivista aperta. La faccia che resta giù si ritaglia con clip-path: è il rettangolo della pagina tagliato dalla piega (l'algoritmo di Sutherland-Hodgman con un semipiano). La faccia piegata si ritaglia sull'altra parte e si sposta con una matrice: ogni suo punto va sul foglio, poi si riflette attraverso la piega. La matrice si ricava da tre punti, (0,0), (1,0) e (0,1), e si scrive come matrix() con transform-origin 0 0.
La luce della piega
La carta sembra curva per tre strisce sfumate stese lungo la piega: una scura sulla faccia che resta giù (la carta che si alza perde luce), una sul retro piegato con un'ombra stretta, un riflesso chiaro e poi un velo scuro verso l'angolo, e una sulla pagina sotto, nella parte che si scopre. Ogni striscia è un div lungo, ruotato con atan2 e posato con un bordo sulla piega; la faccia ritagliata la taglia da sola. La loro forza cresce con la piega e cala quando la pagina si sdraia dall'altra parte. Il retro piegato ha anche un drop-shadow, sullo strato che lo contiene: sulla pagina stessa il clip-path lo taglierebbe.
Il giro e il trascinamento
Un clic porta l'angolo da C all'angolo opposto (0, cy) con un tween di GSAP: x va diritto, y si alza di un arco (il seno della corsa per CURL) verso il centro della pagina, così l'angolo descrive una curva. Trascinando, P segue il puntatore con un tween di 0,22 secondi; lasciato, si conta dove sta l'angolo e la velocità: oltre metà, o più veloce di FLICK, finisce di girarsi, altrimenti torna. Vicino all'angolo il puntatore lo solleva di LIFT pixel e un elastic.out lo rimette giù.
La pila e la regia
L'ordine delle pagine si rifà dopo ogni giro: a destra il foglio con l'indice più basso sta sopra, a sinistra quello più alto; il foglio che si gira sale sopra a tutti, e il suo retro piegato sopra la sua faccia. Chiusa, la rivista sta in mezzo (x di metà pagina); aperta, sta in mezzo la costola. I bordi delle pagine sotto sono ombre a una riga per foglio. Il clic dell'anteprima (detail 0) gira la pagina dopo; all'ultima richiude la rivista con i fogli in sequenza, RIFFLE secondi l'uno dall'altro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TURN | script.js | 1.1 | Quanti secondi impiega una pagina a girarsi dopo un clic. |
CURL | script.js | 0.4 | Quanto si alza l'angolo mentre la pagina si gira, in parti dell'altezza della pagina: 0 la gira rasente al bordo, 0.8 la solleva in un arco alto. |
SHADOW | script.js | 0.7 | Quanto sono scure le ombre sulla piega e sulla pagina sotto (da 0 a 1). |
LIFT | script.js | 26 | Di quanti pixel si alza l'angolo quando il puntatore gli si avvicina (0 = non si alza). |
CORNER | script.js | 0.3 | Quanto vicino all'angolo deve arrivare il puntatore per sollevarlo, in parti della larghezza della pagina. |
FLICK | script.js | 650 | La velocità, in pixel al secondo, con cui una pagina trascinata si gira anche prima di metà. |
RIFFLE | script.js | 0.16 | I secondi fra una pagina e l'altra quando, alla fine, la rivista si richiude. |
Quando usarla
Per sfogliare qualcosa che è nato su carta: una rivista o un catalogo online, un portfolio da stampa, il menu di un ristorante, un libro per bambini, un lookbook, un rapporto annuale da leggere a pagine, un invito. Funziona meglio con pagine che si leggono da sole, titoli grandi e immagini a tutta pagina.
Sul telefono
La stessa rivista con le stesse pieghe, aperta su due pagine larghe quanto lo schermo: le misure dentro le pagine sono in parti della larghezza, quindi i titoli restano grandi e il testo diventa piccolo come in una rivista vera vista da lontano. Si gira con un tocco o trascinando l'angolo col dito; il sollevamento sotto il puntatore non c'è, perché al tocco non c'è un puntatore che si avvicina.
Con il movimento ridotto
Niente si piega e niente si sposta: a un clic la rivista svanisce e ricompare aperta sulla pagina dopo, già al suo posto; anche la chiusura alla fine è una dissolvenza. All'arrivo compare in dissolvenza, senza rimbalzo né angolo che si alza, e le parole non salgono.
Trappole
- Il drop-shadow sulla pagina piegata non si vedeva: clip-path viene applicato dopo il filtro, quindi taglia anche l'ombra. Il filtro va sullo strato che contiene la pagina, che non è ritagliato.
- Girando una pagina di sinistra il retro piegato restava nascosto: i due strati di un foglio avevano lo stesso z-index e vinceva l'ordine nel documento, che mette il retro sopra il davanti. Durante la piega lo strato della faccia piegata sale di uno.
- Il riflesso della piega deve seguire la carta: le strisce sfumate stanno dentro le pagine, e la loro posizione si calcola nelle coordinate di ogni faccia (specchiate per il retro), non in quelle della rivista.
- Al telefono la rivista usciva dallo schermo: la larghezza di partenza nel CSS (prima che lo script misuri) era più larga dello schermo, e il browser del telefono allargava la pagina per contenerla. La misura di partenza ora è piccola.
- Senza i vincoli la carta si strappa: con l'angolo portato più lontano di una pagina dalla costola la piega taglierebbe fuori la costola stessa e il foglio si staccherebbe. P si riporta dentro i due cerchi prima di ogni disegno.
- Un clic arrivato mentre l'entrata stava ancora sollevando l'angolo faceva litigare due tween sullo stesso punto: il clic porta prima l'entrata alla fine.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 10 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.
