Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola sfogliata col pollice
Effetto al passaggio su un titolo, in stile minimal: ogni lettera è un blocchetto di fogli rilegati a sinistra. Passando col puntatore o col dito i fogli delle lettere vicine si aprono a ventaglio come pagine sfogliate col pollice, mostrando la stessa lettera in pesi diversi, poi ricadono su una molla e la lettera resta con il peso del foglio dopo.
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 word riffled with the thumb</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="pagina" data-pagina>
<header class="testa">
<p class="marchio">Spine</p>
<p class="nota">Hand bindery, since 1987</p>
</header>
<section class="palco" data-palco aria-label="The word riffle: pass over it to riffle its pages">
<h1 class="parola" data-parola aria-label="riffle">riffle</h1>
<div class="riga" aria-hidden="true">
<span class="tacca tacca--sx"></span>
<span class="filo" data-filo></span>
<span class="tacca tacca--dx"></span>
</div>
<p class="conta" aria-hidden="true"><span>Pages turned</span> <b data-conta>0</b></p>
</section>
<footer class="piede">
<p>Pass over the word, or drag across it</p>
</footer>
</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.
23 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 parola sfogliata col pollice» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianco caldo, per la legatoria inventata Spine, c'è una parola sola, «riffle», in un serif variabile, con sotto una riga sottile e due tacche. Ogni lettera è fatta di cinque fogli uno sull'altro, rilegati sul lato sinistro. Quando il puntatore (o il dito) passa sopra la parola, i fogli delle lettere vicine si sollevano in prospettiva, ruotando sul dorso: quello in cima si alza di più, quelli sotto sempre meno, e si vede il ventaglio delle stesse lettere in pesi diversi, più chiare; sul dorso che si apre si accende un filo vermiglio, e la riga sotto si alza di un pixel. Quando il pollice è passato, i fogli ricadono su una molla, vanno un grado oltre e si posano; in cima è arrivato il foglio dopo, e la lettera prende il nuovo peso con un piccolo schiacciamento. Passando avanti e indietro la parola cambia peso lettera per lettera, e un contatore in basso conta le pagine girate. Quando nessuno muove il puntatore, ne passa uno finto avanti e indietro sulla parola.
Come funziona
Le lettere fatte di fogli
Lo script divide la parola in lettere. Ogni lettera ha uno span invisibile scritto col peso più pesante, che le dà la larghezza così niente si sposta quando il peso cambia, e sopra cinque fogli in posizione assoluta, con la stessa lettera, la prospettiva sul lato sinistro e transform-origin sul dorso.
Quanto il pollice tocca una lettera
A ogni fotogramma si misura la distanza del puntatore dal centro di ogni lettera, in larghezze di lettera, e anche dall'altezza della parola; una curva morbida (smoothstep) la trasforma in un numero da 0 a 1, che segue il puntatore con un piccolo ritardo.
Il ventaglio sulla molla
Ogni foglio ha il suo angolo e la sua velocità: la meta è l'apertura per un angolo che scende dal foglio in cima a quello in fondo, e una molla con rigidità e attrito porta l'angolo verso la meta, così i fogli vanno un grado oltre e si assestano. I fogli sotto si vedono solo quando la lettera è aperta.
La pagina girata
Quando una lettera è stata aperta più di metà e torna quasi chiusa, conta come una pagina girata: il foglio dopo va in cima, GSAP porta il peso al nuovo valore con un elastico, la lettera si schiaccia di un niente e il contatore sale.
Il pollice finto
Se il puntatore vero non si muove da più di 2,4 secondi parte una timeline in loop che porta un pollice finto da un capo all'altro della parola e indietro, con una pausa ai capi; appena si muove il puntatore vero la timeline si ferma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'riffle' | La parola da sfogliare (fino a 10 lettere). |
LEAVES | script.js | 5 | Quanti fogli ha ogni lettera (al massimo quanti sono i pesi). |
SPREAD | script.js | 74 | Di quanti gradi si solleva il foglio in cima al ventaglio. |
REACH | script.js | 1.15 | Fin dove arriva il pollice, in larghezze della lettera. |
SPRING | script.js | [210, 15] | La molla dei fogli: quanto è rigida e quanto è frenata. |
WEIGHTS | script.js | [280, 380, 480, 580, 680] | I pesi dei fogli, uno dopo l'altro (Fraunces va da 100 a 900). |
UNDER | script.js | 0.42 | Quanto si vedono i fogli sotto quando il ventaglio è aperto. |
Quando usarla
Per il titolo o il marchio di un sito che ha a che fare con la carta e i libri: una legatoria, una casa editrice, una libreria, una rivista, un blog di letture, il portfolio di un illustratore; anche per un elenco di parole grandi in un menu.
Sul telefono
La stessa animazione con le misure adattate: la parola sta nella larghezza dello schermo e nell'altezza della casella. Si sfoglia trascinando il dito sulla parola; quando il dito si alza i fogli ricadono.
Con il movimento ridotto
Niente ruota: passando sopra una lettera cambia solo il suo peso, con una dissolvenza.
Trappole
- Con la larghezza presa dal peso del momento le lettere vicine si spostavano a ogni cambio di peso: ogni lettera ha uno span invisibile scritto col peso più pesante che le tiene il posto.
- Il pollice finto va calcolato sulla larghezza della parola rimisurata a ogni fotogramma, perché la finestra della demo cambia misura mentre la si guarda.
- Il contatore sale solo se la lettera è stata aperta davvero (più di metà): senza questa soglia bastava sfiorarla per girare una pagina.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,7 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
