Certificati che si impilano
Hover, Immagini
NuovaA vita
Torna alla libreria
La lente sul nastro
Un nastro di francobolli scorre piano sotto una lente rotonda: fuori è sfocato e spento, dentro la lente è nitido, acceso e più grande. Passandoci sopra rallenta, e si può trascinare e lanciare.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
Il codice di questa animazione è nell’accesso a vita.
L’anteprima resta libera: guardala, rallentala, provala sul telefono.
Accesso a vitaCosa fa
Su una pagina d’album verde scuro, una striscia di pergamino porta una fila di francobolli disegnati: un faro, un girasole, una cometa, una balena e altri otto. La fila scorre da sola verso sinistra, sfocata e quasi senza colore. Al centro c’è una lente rotonda col bordo d’ottone: quello che le passa sotto è nitido, acceso e un poco più grande, e sotto la lente si legge il nome e il valore del francobollo del momento, che cambia con un piccolo salto. Col mouse sopra il nastro rallenta quasi fino a fermarsi; trascinandolo si sposta, e lasciandolo con un gesto veloce scivola per inerzia e poi riprende il suo passo. Con il fuoco e le frecce si va di un francobollo alla volta.
Come funziona
Due nastri uguali
Il nastro esiste due volte, con gli stessi francobolli nello stesso ordine: uno dietro, a tutta larghezza, con filter: blur(3px) brightness(0.5) saturate(0.55); uno dentro la lente, un cerchio col clip-path circle(50%), nitido. Li muove lo stesso numero, quindi non possono perdere il passo.
Ingrandire attorno a un punto
Un punto del nastro che dietro sta a x, dentro la lente deve stare a c + s × (x − c), dove c è il centro della lente e s l’ingrandimento, 1,18. Con transform-origin in alto a sinistra basta una trasformazione: translate(r + s × (x − c), r + s × (cima − cy)) scale(s), dove r è il raggio della lente.
Un giro senza fine
Un giro è la serie intera: dodici francobolli per il loro passo. Nel nastro ci sono tante copie quante servono a coprire lo schermo più una, e la posizione disegnata è x − ⌈x / giro⌉ × giro, sempre fra meno un giro e zero: il numero cresce senza limiti, il nastro no.
Rallentare, trascinare, lanciare
A ogni fotogramma la velocità insegue la sua meta con 1 − e^(−2,4 × dt): 46 pixel al secondo, 9 col mouse sopra. Trascinando si misura la velocità dell’ultimo decimo di secondo del gesto; lasciando, il nastro parte da quella e torna da solo alla sua andatura, senza una curva scritta a mano. Il francobollo sotto la lente è round((c − x − metà francobollo) / passo), modulo dodici.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FRANCOBOLLI | script.js | 12 francobolli | Nome, valore e disegno di ogni francobollo: il disegno è un pezzo di SVG in un riquadro di 84 × 94, dentro un foglio di 100 × 125 già dentellato. |
PASSO, LENTO | script.js | 46, 9 | Pixel al secondo del nastro, da solo e col mouse sopra. |
INGRANDISCE | script.js | 1.18 | Quanto ingrandisce la lente: con la lente larga una volta e mezza il francobollo, un francobollo intero ci sta dentro fino a circa 1,2. |
--fb | style.css | clamp(128px, 24vh, 232px) | L’altezza di un francobollo: nastro, lente e didascalia ne discendono. |
Quando usarla
Per una collezione da sfogliare senza fretta: prodotti, copertine, etichette, opere. La lente dice dove guardare e il nastro lascia intuire che ce ne sono altre.
Sul telefono
Francobolli e lente più piccoli; il dito in orizzontale trascina e lancia il nastro, in verticale scorre la pagina.
Con il movimento ridotto
Il nastro sta fermo, col primo francobollo sotto la lente: si sposta solo trascinandolo o con le frecce, senza inerzia e senza il salto del nome.
Trappole
- Il nastro sfocato deve essere un elemento a parte dalla lente: con backdrop-filter la sfocatura si rifà a ogni fotogramma su tutta la fascia, con filter sul nastro che si sposta il browser la tiene nel suo strato.
- Dentro la lente serve uno sfondo pieno: fra un francobollo e l’altro si vedrebbe il nastro sfocato che c’è dietro.
- Non spostare il numero di un giro a ogni passaggio: lasciarlo crescere e avvolgere solo quello che si disegna evita salti durante un’animazione di GSAP sulle frecce.
- La velocità del lancio va misurata sui tempi degli eventi (event.timeStamp), come spostamento dell’ultimo decimo di secondo diviso il suo tempo: dividendo evento per evento, due eventi nello stesso fotogramma sembrano istantanei e il lancio esplode. Un dito fermo da più di un decimo di secondo non lancia.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 21 KB dei nostri file.
Collaudo
Provata il 27 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.
