Il globo di copertine
Scroll, 3D, Immagini
NuovaGratis
Torna alla libreria
La galleria sul nodo
Centoventi foto sospese lungo un nodo chiuso e una camera che ci cammina dentro: vicine hanno colore, lontane diventano grigie nella nebbia, e mentre scorri gli angoli si arrotondano.
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 galleria sul nodo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="sala" data-sala>
<!-- le foto: lo script le dipinge e le appende qui, poi le mette in 3D a ogni fotogramma -->
<div class="mondo" data-mondo aria-hidden="true"></div>
<!-- un velo scuro in alto e in basso: le foto ci passano sotto e le scritte restano leggibili -->
<div class="velo" aria-hidden="true"></div>
<header class="testa">
<p class="marchio">Scarti</p>
<p class="testa__riga">Mostra di foto venute male<br>La sala grande</p>
</header>
<div class="didascalia" aria-live="polite">
<p class="didascalia__nome"><span class="maschera"><span data-nome> </span></span></p>
<p class="didascalia__riga"><span class="maschera"><span data-riga> </span></span></p>
</div>
<div class="piede">
<p class="nota" data-nota>Scorri o trascina per camminare fra le foto: più sono vicine, più hanno colore. Le frecce cambiano il percorso.</p>
<div class="percorso">
<span class="percorso__etichetta">Percorso</span>
<button class="tasto" type="button" data-prima aria-label="Percorso precedente">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6" /></svg>
</button>
<span class="percorso__nome maschera"><span data-percorso>Trifoglio</span></span>
<button class="tasto" type="button" data-dopo aria-label="Percorso successivo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</button>
</div>
</div>
</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.
29 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 galleria sul nodo» da Animorio e adattala al mio sitoCosa fa
Una sala buia con centoventi foto venute male sospese nello spazio: la camera cammina lungo un nodo chiuso e le foto le passano accanto, sopra e sotto. Quelle vicine hanno tutti i loro colori, quelle lontane diventano grigie e svaniscono nella nebbia. La rotella, il trascinamento o le frecce fanno camminare la camera, che da sola va avanti piano; mentre scorri gli angoli delle foto si arrotondano fino all’ovale, e da fermi tornano dritti. Il puntatore sporge la camera di lato. In basso c’è il nome della foto più vicina, e due frecce cambiano il percorso: trifoglio, nodo Savoia, molla.
Come funziona
Il percorso
Il percorso è una formula chiusa: il nodo a trifoglio (sin a + 2 sin 2a, −0,8 sin 3a, cos a − 2 cos 2a) per 820 px, steso quasi in piano. Si campiona in 2400 punti e se ne misura la lunghezza cumulata: una posizione in px lungo il percorso diventa un punto con una ricerca binaria, e la camera va sempre alla stessa velocità, anche nelle curve strette.
La camera
L’occhio sta sul percorso e guarda il punto 0,035 giri più avanti. La destra è il prodotto vettoriale fra la direzione e l’alto del mondo, l’alto della camera quello fra la destra e la direzione. La meta si sposta con la rotella (1,1 px per px), col trascinamento e da sola, 150 px al secondo; la posizione la insegue con 0,35 secondi di elastico. Il puntatore sposta l’occhio fino a 70 px di lato e 44 in alto, e la mira un po’ meno: la camera si sporge e gira appena.
Le foto davanti all’occhio
Niente motore 3D: per ogni foto si calcola dove sta rispetto all’occhio, con tre prodotti scalari, e si scrive translate3d(x, −y, 520 − z) dentro un contenitore con perspective: 520px e un livello con transform-style: preserve-3d, che le mette in ordine di profondità. Non ruotano mai, così guardano sempre la camera.
Nebbia, colore e angoli
L’opacità scende da 1500 a 3400 px di distanza, e le foto più vicine di 260 px svaniscono prima di passare dietro l’occhio. Il grigio (filter: grayscale) sale da 650 a 2600 px, a scalini di un decimo per non riscriverlo a ogni fotogramma. Gli angoli li arrotonda la rotella: ogni colpo aggiunge, il valore cala da solo in 0,35 secondi, e arriva alle foto come una sola variabile --tondo sul contenitore.
Il cambio di percorso
Una freccia dà alla meta 3200 px in 1,8 secondi di power3.inOut; a metà, quando la camera va più forte, il nodo diventa il percorso nuovo e le foto si riappendono intorno. I tre percorsi non si incrociano mai: un percorso che passa due volte dallo stesso punto porta la camera nel mucchio più fitto di foto proprio mentre corre. A ogni fotogramma si aggiunge la differenza fra il totale addolcito e quello già dato, così la strada è esatta a qualunque frequenza dello schermo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
QUADRI, LATO | script.js | 120, 264 | Quante foto sul percorso e il loro lato lungo, in px. |
SCALA | script.js | 820 | Quanto è grande il percorso, in px. |
VICINO, LONTANO | script.js | 300, 950 | Quanto le foto stanno lontane dal percorso: mai meno, mai più. |
AVANTI | script.js | 0.035 | Quanto più avanti guarda la camera, in giri. |
ELASTICO, DERIVA | script.js | 0.35, 150 | Il ritardo della camera, in secondi, e quanto cammina da sola, in px al secondo. |
NEBBIA, COLORE | script.js | [1500, 3400], [650, 2600] | Dove comincia e finisce la nebbia, e dove le foto perdono il colore. |
TONDO | script.js | 50 | Quanto si arrotondano gli angoli mentre scorri, in percento. |
PIEGA, GIRA | script.js | [70, 44], 0.35 | Quanto la camera si sporge col puntatore e quanto gira verso il punto che guardava. |
CORSA | script.js | 3200 | La rincorsa del cambio di percorso, in px. |
Quando usarla
Per una galleria che deve sembrare un posto e non una griglia: una mostra, un archivio di foto, un portfolio con tante immagini piccole. Più foto ci sono, più il viaggio è pieno.
Sul telefono
Si cammina trascinando il dito, su e giù o di lato, e al rilascio c’è un piccolo lancio. L’obiettivo è più largo, con una prospettiva di 400 px, perché lo schermo stretto non sembri un corridoio, e le foto stanno più vicine al percorso, a due terzi della distanza.
Con il movimento ridotto
La camera non cammina da sola, gli angoli restano dritti e il puntatore non la sporge; la rotella e le frecce la spostano con un elastico più corto.
Trappole
- Le foto troppo vicine finiscono dietro l’occhio e la prospettiva le manda all’infinito: sotto i 90 px di profondità si nascondono, e prima svaniscono, se no una foto di 264 px diventa larga come tre schermi.
- Camminando sull’angolo della formula la camera non va a velocità costante: nelle curve strette accelera. Si campiona una volta e si cammina sulla lunghezza, non sull’angolo.
- Con 120 elementi in 3D si scrive solo quello che cambia: la visibilità quando una foto entra o esce dall’inquadratura, l’opacità e il grigio a scalini, --tondo solo quando cambia davvero.
- Senza transform-style: preserve-3d le foto si sovrappongono nell’ordine del codice, non in quello della profondità.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 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.
