Le stanze in infilata
Gallerie, Transizioni, Immagini, 3D
NuovaGratis
Tutti i componenti
La galleria del proiettore di diapositive
Le diapositive a colori di un fotografo nel carosello rotondo di un proiettore degli anni Settanta, costruito in 3D. Avanti o indietro, il carosello gira di uno scatto e oscilla un poco sul fermo, la diapositiva cade nel proiettore e rimbalza, e sullo schermo la foto sale dal basso al contrario, perché la lente capovolge tutto; poi la messa a fuoco automatica cerca e si assesta. Il fascio di luce è pieno di pulviscolo colorato come la foto, e le didascalie sono scritte a penna sui telaietti.
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 slide projector gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/nothing-you-could-do@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a photographer's slides in the round tray of a seventies projector. The tray clicks round a notch, the slide
drops into the gate and the lamp throws it up on the screen, through a beam full of dust; the autofocus hunts
and settles. The tray, the projector and the remote are built in CSS 3D, the photographs are painted by the
script, the beam and its dust are a canvas -->
<section class="show" aria-roledescription="carousel" aria-label="Colour slides, 1974 to 1979" data-gallery data-autoclic>
<div class="show__fit" data-fit>
<figure class="screen" data-screen>
<div class="screen__roller" aria-hidden="true"></div>
<div class="screen__cloth" aria-hidden="true">
<div class="screen__spill" data-spill></div>
<div class="screen__gate" data-gate>
<canvas class="screen__pic" data-pic></canvas>
<canvas class="screen__pic screen__pic--fade" data-pic-fade></canvas>
<div class="screen__warm"></div>
<div class="screen__vignette"></div>
<div class="screen__hot"></div>
</div>
<div class="screen__weave"></div>
</div>
<div class="screen__batten" aria-hidden="true"><span class="screen__pull"></span></div>
<figcaption class="sr" data-alt></figcaption>
</figure>
<canvas class="beam" aria-hidden="true" data-beam></canvas>
<svg class="cord" aria-hidden="true" focusable="false" data-cord><path data-cord-line/><path data-cord-shine/></svg>
<div class="remote" role="group" aria-label="Projector remote" data-remote>
<div class="remote__body">
<span class="remote__grip" aria-hidden="true"></span>
<div class="remote__keys">
<button class="key key--back" type="button" aria-label="Reverse: previous slide" data-prev>
<span class="key__cap">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.5 6.5 7 12l5.5 5.5M18 6.5 12.5 12l5.5 5.5"/></svg>
</span>
<span class="key__name">Reverse</span>
</button>
<button class="key key--on" type="button" aria-label="Forward: next slide" data-next>
<span class="key__cap">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.5 6.5 17 12l-5.5 5.5M6 6.5 11.5 12 6 17.5"/></svg>
</span>
<span class="key__name">Forward</span>
</button>
</div>
<span class="remote__plate" aria-hidden="true">Autofocus</span>
</div>
</div>
<div class="room" data-room>
<div class="world" data-world></div>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</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.
34 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 del proiettore di diapositive» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, la stanza buia di una proiezione. In alto uno schermo da srotolare, col rullo, la barra in fondo e l'anello per tirarlo; sulla tela la foto proiettata, calda di lampada a incandescenza, con gli angoli che scuriscono e il punto caldo al centro. In basso il proiettore visto da dietro e un po' dall'alto: il corpo marrone col piano di alluminio satinato, le feritoie dietro da cui si vede la lampada accesa, la presa del telecomando, l'obiettivo che spunta davanti. Sopra c'è il carosello nero con sei diapositive in piedi nelle loro scanalature, ognuna col suo telaietto (plastica bianca, cartoncino, plastica grigia), la pellicola dentro la finestrella e, dal lato della lampada, il nome del posto e la data scritti a penna; dall'altro lato la scritta stampata del laboratorio e il mese dello sviluppo. La diapositiva nel proiettore è più bassa delle altre: è scesa nella fessura, da cui sale la luce arancione, e se ne legge la didascalia. Dall'obiettivo il fascio sale fino allo schermo, fatto di raggi che prendono ognuno il colore della foto dove arrivano, con il pulviscolo che brilla. Accanto, il telecomando col filo: due tasti grandi, Reverse e Forward. Premendo, la diapositiva risale nel carosello e sullo schermo la foto scende via, il carosello gira di uno scatto con un piccolo dondolio sul fermo, la diapositiva dopo cade nella fessura e rimbalza, e la sua foto sale sullo schermo rimbalzando con lei, sfocata; poi la messa a fuoco la cerca, la passa un poco e la trova. Il filo del telecomando ondeggia, il pulviscolo si mette in moto e piano si ferma. Sopra una diapositiva del carosello il puntatore la solleva come per prenderla; cliccata, il carosello gira fino a lei per la via più corta, anche di più scatti. Si gira anche a mano, trascinando il carosello o lo schermo, e lasciato si ferma sulla diapositiva più vicina o su quella dopo se è stato lanciato. Passando col puntatore nel fascio il pulviscolo si sposta intorno alla mano.
Come funziona
Un proiettore in CSS 3D
Il proiettore è un piccolo mondo in pixel (x a destra, y in giù, z verso chi guarda) dentro un contenitore con la prospettiva, inclinato di 38 gradi con rotateX. Corpo, piano e retro sono facce piatte con translate3d e rotateX o rotateY; il carosello, il mozzo e l'obiettivo sono cilindri fatti di 44, 16 e 18 strisce messe in cerchio (rotateY o rotateZ, poi translateZ del raggio), ognuna con la sua luce secondo il lato verso cui guarda. Le diapositive sono pulsanti veri messi di taglio nel carosello: rotateY dello scatto e translate3d del raggio, con una faccia per lato e backface-visibility nascosta. Così il punto di fuga, l'ordine fra le facce e il clic su una diapositiva li fa il browser.
Il carosello sul fermo
La rotazione del carosello è un numero in gradi spinto da una molla verso lo scatto giusto: il motore lo tiene sotto TURN_SPEED gradi al secondo finché manca più di 6 gradi, poi la molla del fermo lo prende e, con lo smorzamento che dà DETENT, lo fa andare un poco oltre e tornare. La molla è rigida, quindi si integra in passi fissi da 1/240 di secondo dentro ogni fotogramma (con passi lunghi esplodeva). Per una diapositiva lontana si sceglie la via più corta; a mano il dito sposta la mira e al rilascio la velocità decide se fermarsi sulla più vicina o sulla dopo.
La diapositiva che cade
Prima la diapositiva nel proiettore risale nel carosello (GSAP, 0,24 s), poi il carosello gira, poi la nuova cade con la gravità vera (2600 pixel al secondo quadrato) fino a DROP della sua altezza, e rimbalza perdendo tre quarti della velocità finché il colpo è piccolo. La parte scesa sotto il fondo del carosello si taglia con un clip-path sul telaietto, e dalla fessura sale una luce arancione che illumina la pellicola. Il dito sopra una diapositiva la solleva su una molla; il carosello si ferma quando niente si muove più.
La foto al contrario
Sullo schermo la foto segue la diapositiva capovolta: la sua posizione è (1 − affondata/DROP) per l'altezza della finestra, quindi scende quando la diapositiva sale e sale rimbalzando quando la diapositiva cade. Senza diapositiva si vede la luce della lampada, attenuata dall'otturatore. All'arrivo la finestra è sfocata di BLUR pixel con un filtro CSS e la messa a fuoco cerca in tre tempi (a fuoco, un poco oltre, di nuovo a fuoco) in FOCUS_TIME secondi, con la foto che respira dell'1 per cento. Sopra la foto: un velo moltiplicato del colore della lampada (WARMTH), la vignettatura (VIGNETTE), il punto caldo e la trama della tela.
Foto dipinte dallo script
Le sei foto sono dipinte pixel per pixel su un canvas di 660 × 440 con un rumore a valori e le sue ottave: il cielo coi cumuli illuminati dall'alto, i tulipani una testa per cella di una griglia in prospettiva, il mare con le creste e il riflesso del sole, le mese con gli strati, le case e i loro riflessi nel canale presi dalla foto stessa e mossi dall'acqua, la rete di luce sul fondo della piscina. Poi il passaggio da pellicola: colori più pieni, una curva a S, ombre calde, grana, la morbidezza della lente e un alone intorno alle luci. Si dipinge una foto per fotogramma mentre la stanza è ancora buia, poi si accende la lampada.
Il fascio e il pulviscolo
Il fascio è un canvas sopra lo schermo in modo screen: un cono morbido e 96 raggi, uno per cella di una griglia di 12 × 8 della foto, ognuno sfumato dall'obiettivo verso lo schermo e del colore della foto dove arriva (spostata insieme alla diapositiva). DUST granelli vivono nelle coordinate del fascio (quanto lontano dall'obiettivo, dove sullo schermo), brillano girandosi e sono più chiari vicino all'obiettivo. Si muovono solo quando c'è aria mossa (un cambio, un rimbalzo, la mano nel fascio) e si fermano piano: a riposo non si ridisegna niente. Il clic da script dell'anteprima fa Forward due volte, sceglie una diapositiva dal carosello, Reverse, e torna alla prima.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TURN_SPEED | script.js | 330 | Quanto gira svelto il carosello, in gradi al secondo. |
DETENT | script.js | 0.45 | Quanto il fermo lascia andare il carosello oltre lo scatto prima di tenerlo (0 lo ferma secco). |
DROP | script.js | 0.42 | Quanto scende la diapositiva nel proiettore, in parte della sua altezza. |
FOCUS_TIME | script.js | 0.95 | I secondi della messa a fuoco automatica per cercare e assestarsi. |
BLUR | script.js | 7 | Quanto arriva sfocata una diapositiva, in pixel sullo schermo. |
DUST | script.js | 150 | I granelli di pulviscolo nel fascio di luce. |
VIGNETTE | script.js | 0.55 | Quanto scuriscono gli angoli della foto proiettata. |
WARMTH | script.js | 0.3 | Quanto la lampada a incandescenza scalda i colori. |
Quando usarla
Per il portfolio di un fotografo o di un archivio di foto, la pagina di una mostra o di un libro di fotografie, i ricordi di un viaggio, un sito che racconta un posto con le immagini, un albergo o una casa vacanze che mostra i dintorni: ovunque le foto meritino la loro serata, una alla volta, con la luce spenta.
Sul telefono
Lo schermo prende quasi tutta la larghezza e il proiettore sta sotto, con un fascio più lungo e il telecomando in basso a destra. Si tocca il telecomando, si tocca una diapositiva nel carosello, oppure si trascina col dito lo schermo (verso sinistra la foto dopo) o il carosello stesso; il pulviscolo si muove intorno al dito che passa nel fascio. Le stesse animazioni del computer, misurate per lo schermo piccolo.
Con il movimento ridotto
Il carosello è già girato e la diapositiva già al suo posto: sullo schermo le foto si scambiano con una dissolvenza incrociata. Niente rimbalzi, niente messa a fuoco che cerca, niente pulviscolo che si muove, niente diapositive che si sollevano; la stanza compare con una dissolvenza.
Trappole
- La diapositiva nel proiettore spariva del tutto: spostare in giù solo il telaietto dentro la faccia, con translateY o con overflow hidden sulla faccia, in Chrome fa smettere di dipingere la faccia di un oggetto in CSS 3D. Si sposta tutto il pulsante della diapositiva e la parte scesa si taglia con un clip-path sul telaietto.
- Con overflow hidden sulle facce delle diapositive anche le altre perdevano il fondo del telaietto: la data in basso non si vedeva. Senza overflow le facce si vedono intere.
- Le due facce di una diapositiva stavano sullo stesso piano e Chrome mostrava a caso quella sbagliata (la scritta del laboratorio a specchio sopra la didascalia): ognuna sta mezzo pixel fuori dal piano, dalla sua parte.
- La molla del fermo è rigida: integrata con il passo del fotogramma (fino a 1/30 di secondo sulla macchina lenta) il carosello oscillava sempre di più e non arrivava mai. Si integra in passi fissi da 1/240 di secondo.
- Le costole fra le scanalature erano alte 20 pixel e coprivano il fondo della diapositiva nel proiettore, che sembrava galleggiare sopra la fessura: ora sono basse 7.
- Dipingere le sei foto costa più di un secondo e bloccava l'entrata a scatti: si dipinge una foto per fotogramma mentre la stanza è ancora buia, e la lampada si accende solo dopo.
- Il campo di tulipani a strisce dava un indice negativo lontano dal punto di fuga e la pagina si fermava; le mese colorate col colore chiave lasciavano un bordo magenta sull'antialiasing: si disegnano con il loro profilo calcolato per ogni pixel.
- Un clic dell'anteprima che arriva prima che la lampada sia accesa si mette da parte e il giro parte appena la prima diapositiva è dentro; un tasto premuto mentre il carosello gira cambia la mira senza perdere il giro in corso.
Librerie
GSAP 3.15.0, Archivo (font variabile, asse wdth) 5.3.0, Nothing You Could Do (font) 5.3.0.
Compressi con gzip, i tre file della demo pesano 27 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 17 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.
