La galleria del proiettore di diapositive
Gallerie, Immagini, 3D, Transizioni
NuovaGratis
Tutti i componenti
Le stanze in infilata
Le foto di una casa in affitto in un vecchio palazzo sul mare, con le stanze una dopo l’altra e tutte le porte in fila: ogni foto è una stanza disegnata in prospettiva, e dalla sua porta si vedono le altre fino alla terrazza e al mare. Aprendo una foto la macchina entra nella stanza; con le frecce, i tasti o il dito si attraversa la porta e si cammina nella stanza dopo, e chiudendo si fa un passo indietro e la foto torna nel suo quadrato.
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="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The enfilade gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bodoni-moda@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/albert-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the photos of a flat whose rooms open one into the next, the doors in a row. Each photo is a room drawn in
perspective by the script; open, the camera steps into it, walks through the doors and steps back out -->
<section class="flat" aria-label="Photos of the flat" data-gallery data-autoclic>
<ul class="flat__grid" data-grid></ul>
<div class="tour" role="dialog" aria-modal="true" aria-labelledby="tour-name" tabindex="-1" hidden data-tour>
<canvas class="tour__view" role="img" data-view></canvas>
<div class="tour__lens" aria-hidden="true"></div>
<div class="tour__shade" aria-hidden="true"></div>
<nav class="plan" aria-label="Floor plan" data-plan>
<svg class="plan__lines" aria-hidden="true" focusable="false" data-plan-lines></svg>
</nav>
<button class="tour__btn tour__close" type="button" aria-label="Close the photos" data-close>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
</button>
<button class="tour__btn tour__step tour__step--back" type="button" data-prev>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.5 6 8.5 12l6 6"/></svg>
<span class="tour__to" aria-hidden="true" data-prev-name></span>
</button>
<button class="tour__btn tour__step tour__step--on" type="button" data-next>
<span class="tour__to" aria-hidden="true" data-next-name></span>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.5 6l6 6-6 6"/></svg>
</button>
<div class="tour__caption">
<h2 class="tour__name" id="tour-name"><span data-name></span></h2>
<p class="tour__line"><span data-line></span></p>
</div>
<p class="sr" aria-live="polite" data-live></p>
</div>
</section>
</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.
16 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 «Le stanze in infilata» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una griglia di sei foto quadrate dagli angoli tondi, ognuna col suo nome sotto e i metri quadri: Entrance hall, Sitting room, Dining room, Study, Bedroom, Terrace. Sono le stanze di una casa in un palazzo d’epoca, disegnate in prospettiva come foto d’interni: l’ingresso col pavimento di marmo bianco e nero a scacchi in diagonale, la passatoia rossa, la consolle sotto lo specchio ad arco e l’attaccapanni; il soggiorno verde salvia col parquet a spina di pesce, il divano color ruggine sotto un quadro, due finestre alte che gettano il sole sul pavimento; la sala da pranzo ocra con le travi scure, il cotto, il tavolo con le sedie impagliate e il lampadario d’ottone; lo studio verde petrolio con la parete di libri e la scrivania sotto la finestra; la camera rosa cipria col letto, le tende di lino e la portafinestra; la terrazza al tramonto col pergolato, i limoni, la ringhiera e il mare. Le porte stanno tutte sulla stessa linea, e in ogni foto si vedono le stanze che vengono dopo, sempre più piccole e più velate dall’aria calda della sera, fino al mare. Sotto il puntatore la foto è una finestra: la macchina si sporge un poco e segue la mano, e la stanza si sposta in profondità, le cose vicine più di quelle lontane. Aprendo una foto la macchina entra nella stanza: la foto cresce dal suo quadrato fino a riempire tutta la galleria mentre la stanza viene incontro, e le altre foto si allargano e scivolano fuori. Aperta, in alto a sinistra c’è una piantina della casa con le stanze in fila, le finestre, la stanza dove sei e un piccolo cono che è la macchina; in alto a destra il pulsante per chiudere, ai lati le frecce, che sotto il puntatore si aprono col nome della stanza dove portano, e in basso il nome della stanza e una riga. Avanti si cammina dritto attraverso la porta: lo stipite cresce e scorre via ai lati, la stanza dopo si apre intorno, il nome cambia a metà del muro e il cono corre sulla piantina. Col dito o col mouse si trascina la macchina lungo le stanze e, lasciata, si ferma nella stanza più vicina o in quella dopo se è stata lanciata; trascinando in giù si torna indietro verso il quadrato. Chiudendo la macchina fa un passo indietro e la foto si stringe nel quadrato della stanza in cui sei, con la griglia che torna intorno.
Come funziona
Stanze misurate in metri
Ogni stanza è una scatola: profondità, muri a sinistra e a destra della linea delle porte, altezza e spessore del muro di fondo, con la porta (dritta o ad arco) bucata nel muro. Le porte stanno tutte su x = 0, dal lato delle finestre come nelle infilate vere, e le stanze sono una dietro l’altra lungo z. I mobili sono scatole, di cui si disegnano solo le facce girate verso la macchina, ognuna con la sua luce (le finestre sono a destra); piante e lampade sono disegni piatti in metri che guardano la macchina. Un piccolo motore proietta ogni punto: sx = px + f·(x − cx)/(z − cz), sy = py − f·(y − cy)/(z − cz). La macchina non gira mai, quindi il punto di fuga è l’occhio e le porte restano una dietro l’altra; quello che sta dietro la macchina si taglia con un piano a 4 centimetri (Sutherland-Hodgman) prima di proiettare.
Solo quello che si vede dalla porta
Si disegna dalla stanza più lontana: la stanza dove sta la macchina, poi attraverso la sua porta la seguente, e così via. Per ogni porta si calcola il rettangolo in cui appare sul canvas (l’apertura sulle due facce del muro), si interseca con quello delle porte prima e la stanza dopo si disegna solo lì dentro; quando il rettangolo diventa più piccolo di un pixel la catena si ferma. Dentro una stanza: muro di fondo, soffitto e pareti, pavimento con le sue fughe, tappeti e luce, poi i mobili ordinati per distanza dalla macchina, e dentro ogni mobile i pezzi ordinati allo stesso modo.
La luce e l’aria
Il sole entra dalle finestre a destra, basso e da dietro: ogni vetro si segue lungo la direzione della luce fino al pavimento, alla parete di sinistra o al muro di fondo, e ogni macchia si taglia sul suo piano, così si piega sugli spigoli e lascia libera la porta; si disegna in modo screen, con un fascio appena visibile nell’aria. Ogni colore va verso il colore della sera con la distanza, m = 1 − e^(−(d − 2)/HAZE): le stanze lontane diventano velate e calde. Cielo, mare e promontori sono all’infinito: si disegnano per angolo dall’occhio e camminando non si avvicinano.
Entrare e uscire
La foto nella griglia è la stanza vista da 90 centimetri prima della sua soglia, col muro davanti tolto. Aprendo, un solo valore u da 0 a 1 (STEP_IN secondi, power3.inOut) muove insieme tre cose: il rettangolo della foto, dal quadrato a tutta la galleria (l’obiettivo segue la diagonale, f = diagonale / 2 / tan(LENS/2)); la macchina, da dove scattava la foto a 45 centimetri dentro la stanza; la griglia, scalata e spostata perché il suo quadrato segua la foto, che sfuma. Chiudendo lo stesso valore torna a 0 partendo da dove sta la macchina, verso il quadrato della stanza in cui si trova.
Camminare
Le frecce, la piantina, i tasti e il trackpad fanno muovere a GSAP solo la z della macchina fino al punto della stanza scelta (WALK secondi per una stanza, power2.inOut; una camminata chiesta mentre si cammina riparte da lì con power2.out). Il nome cambia a metà dello spessore del muro, con una sfocatura. Il dito trascina la macchina lungo le stanze (6,2 metri ogni 62% della larghezza), con un elastico oltre la prima e l’ultima; lasciata, va nella stanza più vicina o nella seguente se è stata lanciata. In giù trascina il valore u dell’entrata: oltre un quarto, o con un lancio, la foto torna nel quadrato.
Tasti, piantina e anteprima
La foto aperta è una finestra (role dialog, aria-modal) col nome della stanza come titolo: la focalizzazione va alla finestra, Tab resta dentro, Esc chiude, le frecce camminano, Inizio e Fine vanno alla prima e all’ultima stanza; chiudendo, la focalizzazione torna alla foto della stanza in cui sei. Il canvas ha la descrizione della stanza (alt) e ogni foto della griglia la sua. La piantina è un SVG fatto dalle stesse misure: muri, finestre e un cono che segue la macchina; ogni stanza è un pulsante. Sopra una foto della griglia la macchina segue il puntatore su una molla (PEEK) e si sporge di 42 centimetri. Un clic da script (l’anteprima della libreria) entra in una stanza, cammina due volte e torna fuori, senza prendere la focalizzazione.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WALK | script.js | 1.35 | I secondi per camminare da una stanza alla seguente (più stanze insieme vanno un po’ più svelte). |
STEP_IN | script.js | 0.95 | I secondi per entrare da una foto nella sua stanza (per uscire un po’ meno). |
LENS | script.js | 88 | Quanto vede largo la macchina, in gradi sulla diagonale della foto: meno è un teleobiettivo, più un grandangolo. |
EYE | script.js | 1.35 | L’altezza della macchina dal pavimento, in metri. |
PEEK | script.js | 0.4 | Di quanti metri si sposta la macchina seguendo il puntatore sopra una foto. |
HAZE | script.js | 30 | I metri d’aria che danno alle stanze lontane il colore della sera: meno, e le stanze in fondo spariscono nella luce. |
Quando usarla
Per l’annuncio di una casa in affitto o in vendita, le camere di un albergo o di una casa vacanze, le sale di un museo o di una villa una dopo l’altra, uno showroom di arredamento: ovunque le foto siano luoghi uno dentro l’altro e valga la pena attraversarli invece di sfogliarli.
Sul telefono
Due colonne di foto. Aperta, la foto riempie la galleria in verticale, con più pavimento e più soffitto (l’obiettivo segue la diagonale, quindi l’inquadratura si adatta da sola). Il dito trascina la macchina lungo le stanze e la lancia, e trascinando in giù si esce; le frecce, la piantina più piccola e il pulsante per chiudere restano. Lo sporgersi sotto il puntatore sul telefono non c’è.
Con il movimento ridotto
La macchina non si muove mai: la foto aperta compare con una dissolvenza, fra una stanza e l’altra c’è una dissolvenza incrociata, chiudendo la foto svanisce e torna la griglia. Niente sporgersi sopra le foto, niente entrata delle miniature; i nomi cambiano senza spostarsi.
Trappole
- Il pavimento a scacchi in diagonale: rombi messi su un punto sì e uno no della griglia la coprono tutta (in quella geometria si toccano su ogni lato), e il pavimento veniva tutto nero. I rombi scuri vanno sui punti pari in tutte e due le direzioni.
- Con le porte in mezzo a stanze larghe le finestre e i mobili restavano fuori dalla foto, perché l’obiettivo vede le pareti laterali solo da lontano: le porte stanno dal lato delle finestre, come nelle infilate vere, e i mobili sul lato lontano e contro il muro di fondo.
- L’ordine del pittore fra scatole che si compenetrano (lo schienale e i braccioli di un divano) disegnava facce sbagliate: i pezzi non entrano mai uno nell’altro (lo schienale sta fra i braccioli) e anche i pezzi di ogni mobile si ordinano per distanza.
- I punti dietro la macchina si proiettano capovolti e attraversando una porta le pareti esplodevano: ogni faccia e ogni linea che passa il piano della macchina si taglia a 4 centimetri prima di proiettare.
- La luce di una finestra in fondo alla stanza cade oltre il muro di fondo: i raggi si seguono anche fino a quel muro e la macchia si taglia intorno alla porta, altrimenti la luce si dipingerebbe sulla stanza dopo vista attraverso la porta.
- La foto della griglia è presa da prima della soglia, col muro davanti tolto: quello che sta sulla soglia (le ante a vetri della camera, aperte sulla terrazza) copriva la foto con due pannelli grigi, e si disegna solo quando la macchina l’ha passata. Per lo stesso motivo, entrando e uscendo la prima stanza da disegnare è quella della foto e non quella in cui sta la macchina, che è ancora la precedente.
- Durante l’entrata la griglia, scalata, uscirebbe dalla galleria e farebbe scorrere la pagina di lato: mentre una foto è aperta la galleria taglia quello che esce dai suoi bordi.
- Attraversando una porta c’era un fotogramma bianco: a meno di 4 centimetri dalla faccia lontana del muro tutte e due le facce dell’apertura sono dietro la macchina e la porta non lasciava vedere niente. Quando la macchina sta dentro la porta, la porta non ritaglia più nulla; una prova centimetro per centimetro lungo tutta la casa (2845 posizioni) non trova più un pixel vuoto.
- Le giunture fra due forme vicine, sfumate dall’antialiasing, lasciavano trasparire la pagina come capelli chiari sul pavimento: sotto ogni foto si stende prima un fondo pieno nel colore dei muri della stanza.
- Il velo scuro agli angoli, disegnato nel canvas a ogni fotogramma, costava più di una stanza intera: è un gradiente CSS sopra la foto, che compare con i comandi.
Librerie
GSAP 3.15.0, Bodoni Moda (font variabile) 5.3.0, Albert Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 30 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
