La lente sul nastro
Hover, Immagini
NuovaA vita
Torna alla libreria
Certificati che si impilano
Un elenco di premi: passando sulle righe ogni attestato si apre dal basso e finisce sopra il precedente, un po' storto, come carte sul tavolo.
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
È una tabella sobria: progetto, premio, chi l'ha dato. Quando il puntatore entra in una riga, il suo attestato si apre dal basso accanto alla riga e cresce appena; quando esce, l'attestato si richiude verso l'alto. Ogni foglio che si apre sale sopra tutti gli altri e ha la sua inclinazione: se scorri veloce sull'elenco i fogli si impilano e per un attimo sul tavolo ce ne sono tre o quattro. Sul telefono si apre l'attestato della riga che passa a metà schermo.
Come funziona
Un foglio per riga
L'attestato sta dentro la sua riga in position absolute, chiuso da clip-path: inset(100% 0 0 0). Aprire vuol dire portare l'inset a zero; chiudere portare a 100% il bordo di sotto, così il foglio se ne va dalla parte opposta.
La pila
Un contatore sale a ogni apertura e diventa lo z-index del foglio che si apre: l'ultimo è sempre sopra. Mentre il precedente si richiude, il nuovo ci passa davanti.
Storti al punto giusto
Ogni foglio ha la sua rotazione (una variabile --giro fra -4 e 4 gradi) con la proprietà rotate, separata dal transform che usa GSAP: la scala animata non la cancella.
Un ascoltatore solo
Invece di mouseenter e mouseleave su ogni riga, un pointermove sulla pagina cerca la riga sotto il puntatore con closest: niente sfarfallii passando fra le parole della stessa riga. Anche il fuoco da tastiera apre il foglio.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DURATA | script.js | 0.5 | Secondi per aprire o chiudere un foglio. Sotto 0.35 la pila non si vede più. |
PICCOLO | script.js | 0.9 | La scala da cui parte il foglio. |
--giro | index.html | fra -3.5 e 3.5 gradi | L'inclinazione di ogni foglio: tienile diverse fra righe vicine. |
--fondo / --segno | index.html | carta e colore | Il fondo e il colore del bordo e del sigillo di ogni attestato. |
Quando usarla
Per premi, clienti, pubblicazioni: elenchi dove la riga dice il nome e l'immagine lo conferma. Con più di dieci righe mettile in pagine o filtri, la pila diventa confusa.
Sul telefono
Senza hover il foglio si apre per la riga che attraversa il centro dello schermo, a destra della riga. Le colonne diventano righe.
Con il movimento ridotto
I fogli compaiono e spariscono senza animazione, ma compaiono: sono contenuto.
Trappole
- Il padding in percentuale di un elemento si calcola sulla larghezza del suo contenitore, non sulla sua: dentro un foglio stretto in una riga larga il testo finisce schiacciato.
- Tieni centratura e inclinazione nelle proprietà translate e rotate del CSS: il transform in linea di GSAP sostituisce quello della classe, e un translateY(-50%) scritto lì non viene riletto come percentuale.
- Un foglio che si chiude e viene riaperto a metà corsa deve partire da dove si trova: usa overwrite auto e rimetti il clip-path di partenza solo a chiusura finita.
- L'attestato copre le righe sotto: tienilo con pointer-events none, altrimenti il puntatore finisce sul foglio invece che sulla riga e tutto sfarfalla.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 12 KB dei nostri file.
Collaudo
Provata il 26 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.
