Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La lattina che gira
Scorri dentro l’anteprima
Una lattina disegnata su un canvas, senza 3D e senza fotogrammi: l’etichetta piatta le si avvolge intorno una colonna di pixel alla volta, e scorrendo fa un giro intero fra due parole enormi che si scoprono sotto una tenda.
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="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La lattina che gira</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="intro">
<p class="nota" data-nota>Scorri: la lattina fa un giro intero mentre attraversi la sezione, e le due parole dietro si scoprono sotto una tenda che cade.</p>
<h1 class="intro__titolo">Tutta l’etichetta, un giro alla volta.</h1>
</section>
<!-- il giro: più alto dello schermo, il palco resta fermo e la lattina gira con lo scorrimento -->
<section class="giro" data-giro>
<div class="palco" data-palco>
<p class="parole" data-parole aria-hidden="true"><span>Cin</span> <span>cin</span><span class="tenda" data-tenda></span></p>
<canvas class="lattina" data-lattina role="img" aria-label="Una lattina di chinotto che gira su sé stessa"></canvas>
</div>
</section>
<section class="fine">
<p class="fine__testo">Davanti il nome, di lato gli ingredienti, dietro un sole che tramonta nel mare. L’etichetta è una sola immagine, avvolta intorno alla lattina una colonna alla volta.</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="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.
21 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 lattina che gira» da Animorio e adattala al mio sitoCosa fa
Una lattina di chinotto alta tre quarti dello schermo, fra due parole enormi, «Cin» e «cin». Scorrendo, il palco resta fermo e la lattina fa un giro intero su sé stessa: davanti c’è il marchio in verticale, da un lato gli ingredienti, dietro un sole che tramonta nel mare, dall’altro lato il codice a barre. La luce resta ferma mentre l’etichetta scorre, il coperchio si vede un poco dall’alto e la linguetta gira con lei. Prima che il palco si fermi le parole salgono dal basso sotto una tenda color carta, un po’ trasparente, che scende e si inclina finché le scopre tutte. Al telefono le parole stanno una sopra e una sotto la lattina.
Come funziona
L’etichetta piatta
L’etichetta si disegna una volta sola su un canvas fuori dallo schermo, larga quanto la circonferenza, 2π r, e alta 4,3 r, coi caratteri già caricati: il marchio ruotato in verticale, gli ingredienti, un sole a cavallo della giunta, disegnato ai due capi, e onde che tornano uguali dopo un giro. In fondo c’è ripetuto il suo inizio, così le colonne a cavallo della giunta si prendono in un colpo solo.
Una colonna alla volta
La colonna x della lattina, da −1 a 1, guarda la superficie con l’angolo asin(x): la striscia di etichetta che le tocca parte da 0,5 + (asin(x) + giro) / 2π ed è larga quanto la differenza d’angolo con la colonna dopo, quindi al centro è larga e ai bordi sempre più schiacciata. Ogni colonna si copia con un drawImage e scende di 0,16 r × cos(angolo), perché il bordo di sopra e quello di sotto, visti un po’ dall’alto, sono ellissi.
La luce ferma
Sopra al corpo, con source-atop, un gradiente orizzontale scurisce i bordi e mette un riflesso chiaro a un quarto della larghezza: resta fermo mentre l’etichetta scorre, ed è quello che fa sembrare la lattina rotonda. Collo, coperchio col suo anello, linguetta e fondo sono ellissi e curve in un grigio metallo a strisce; l’ombra si disegna dietro a tutto con destination-over.
Il giro e la tenda
La sezione è alta tre schermi col palco sticky: il giro va da 0 a un giro intero mentre il palco è fermo, e prima e dopo continua, così la lattina entra girando. Quello disegnato raggiunge quello voluto con un inseguimento a tempo, 9 al secondo, e si ridisegna solo se cambia. La tenda è un velo color carta all’82% sulle parole: uno ScrollTrigger con scrub la fa scendere del 190% e ruotare di −8 gradi mentre le parole salgono.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GIRI | script.js | 1 | Quanti giri fa la lattina mentre il palco è fermo. |
SEGUE | script.js | 9 | Quanto in fretta la lattina raggiunge lo scorrimento, al secondo. |
ALTEZZA | script.js | 0.72 | Quanto è alta la lattina, in parte dell’altezza dello schermo. |
INCLINA | script.js | 0.16 | Quanto si vede il coperchio: 0 di lato, 1 da sopra. |
TENDA | script.js | 190, −8 | Dove arriva la tenda: in percento della sua altezza, e in gradi. |
COLORI | script.js | #FF6B2C… | I colori dell’etichetta, che si disegna tutta nella funzione scriviEtichetta. |
Quando usarla
Per il prodotto rotondo di un negozio: una bibita, una birra, una passata, un vasetto di miele, una candela. Fa vedere tutta l’etichetta senza un servizio fotografico a trecentosessanta gradi.
Sul telefono
Le parole vanno una sopra e una sotto la lattina, che resta grande; il giro lo muove lo scorrimento come al computer, e le colonne sono in pixel del telefono, fino a due per punto.
Con il movimento ridotto
La lattina sta ferma di tre quarti, col marchio ben leggibile; la sezione è alta uno schermo e la tenda non c’è.
Trappole
- Se la striscia di ogni colonna è larga sempre uguale, l’etichetta sembra dipinta su un cartone piatto: la larghezza giusta è la differenza d’angolo fra una colonna e la successiva, che ai bordi cresce molto.
- La luce non deve girare con l’etichetta: se fosse disegnata dentro l’etichetta, la lattina sembrerebbe ferma e l’etichetta un nastro che le scorre sopra.
- Un disegno che si avvolge ha una giunta: quello che la attraversa, qui il sole, va disegnato ai due capi, e le onde devono essere un numero intero in un giro.
- Se l’etichetta si scrive prima che i caratteri siano caricati, resta col carattere di riserva, perché non si ridisegna più: si aspetta document.fonts.load.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,7 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 28 settembre 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.
