Il globo di copertine
Scroll, 3D, Immagini
NuovaA vita
Torna alla libreria
La stanza delle carte
Sedici carte e tre viste: una cupola che ti gira intorno, un elenco dove ogni carta diventa la miniatura del suo nome, una fila in diagonale che sgretola le carte lontane. Cambiando vista le carte partono una dopo l’altra.
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
Le carte arrivano dal fondo e si dispongono su una cupola: tu sei al centro, quelle davanti sono grandi e dritte, quelle ai lati girano il viso verso di te. Trascinando la cupola gira; lasciandola, la carta più vicina al centro viene davanti. Premendo «Elenco» le carte partono una alla volta e vanno a sinistra dei loro nomi, rimpicciolendo fino a diventare miniature, mentre le lettere dei nomi salgono. Premendo «Fila» si mettono in diagonale: quella in mezzo è grande e avanti, le lontane si sgretolano in un retino. Nella fila si scorre con le frecce, trascinando o col trackpad.
Come funziona
La cupola
Le carte stanno su una sfera con la spirale di Fibonacci (y = 1 − 2i/(n−1), longitudine i × π(3 − √5)). Una matrice di rotazione le gira; per ognuna si prende l’angolo dall’asse della vista, lo si schiaccia a 0,62 e se ne ricava posizione e inclinazione: le carte davanti sono grandi, quelle ai lati girate verso il centro, quelle dietro svaniscono.
Girare con morbidezza
Il trascinamento non gira la cupola: sposta un bersaglio. Due gsap.quickTo lo inseguono in un secondo con power2, e a ogni fotogramma la differenza diventa una piccola rotazione attorno agli assi dello schermo. Fermi per un quarto di secondo, si calcola l’angolo che porta davanti la carta più vicina.
Il cambio di vista
Al cambio si fotografa la posa di ogni carta (posizione, giro, scala, opacità, retino) e un numero va da 0 a 1 in 1,6 secondi, lineare. Ogni carta usa metà del tempo, partendo tanto più tardi quanto più viene dopo: p = smoothstep((t − i/(n−1) × 0,5) / 0,5). La posa di arrivo è viva: la fila o la cupola continuano a muoversi mentre le carte arrivano.
Il retino della fila
Nella fila ogni carta sta a e posti da quella in mezzo: x = e × 0,62 lati, y = −e × 0,3, più indietro quanto più è lontana. Oltre il primo posto una maschera di Bayer la copre all’80, 60, 40 e 20%: la carta si sgretola invece di sfumare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CARTE | script.js | 16 carte | Nome, due colori e forma della copertina di ogni carta: le copertine si disegnano da sole a retino. |
CAMBIO | script.js | 1.6 | Secondi di un cambio di vista; ogni carta ne usa la metà. |
COMPRESSO | script.js | 0.62 | Quanto la cupola raccoglie le carte verso il centro: più basso, cupola più stretta. |
--lato | style.css | clamp(104px, 11.5vw, 168px) | Larghezza di una carta; l’altezza è 1,12 volte. |
Quando usarla
Per l’archivio dei lavori di uno studio, una collezione di prodotti o una galleria: tre modi di guardare la stessa cosa, e il passaggio fra l’uno e l’altro è già uno spettacolo.
Sul telefono
Si parte dalla fila, che al telefono si legge meglio. Il dito di lato scorre la fila o gira la cupola; dentro un iframe il dito in verticale resta alla pagina.
Con il movimento ridotto
Il cambio di vista è immediato con una dissolvenza di due decimi; niente ingresso dal fondo, niente inseguimento morbido e niente ritorno automatico davanti.
Trappole
- Con perspective sul contenitore e le carte trasformate in 3D, l’ordine davanti e dietro non segue la profondità: lo decide z-index, da aggiornare a ogni fotogramma.
- Le rotazioni vanno accumulate in una matrice (o un quaternione) moltiplicando a sinistra: sommare gli angoli di X e Y dà rotazioni sbagliate appena la cupola è girata.
- Un trascinamento che parte su una carta finisce con un clic su quella carta: ignoralo se il puntatore si è mosso più di qualche pixel.
- Le carte invisibili devono uscire dal Tab e dai clic: tabIndex = −1 e pointer-events: none finché l’opacità è bassa.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 24 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.
