Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
La foto dalla fessura
Nello stile minimal: una riga rossa sottile si disegna al centro della pagina e si apre come una fessura. La foto esce in colonne, prima quella di mezzo e poi le altre a coppie verso i lati, ognuna su una molla che va un pixel oltre e torna; quando l’ultima si posa la didascalia prende peso lettera per lettera.
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 photo from the slit</title>
<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" data-stage>
<p class="mark" data-mark>Lumen</p>
<!-- the plate: the script places it, cuts the photo into columns and opens them from one slit in the middle -->
<figure class="plate" data-plate role="img">
<div class="cols" data-cols aria-hidden="true"></div>
<i class="edge" data-edge aria-hidden="true"></i>
<i class="edge" data-edge aria-hidden="true"></i>
<figcaption class="cap" aria-hidden="true">
<span class="cap__title" data-title></span>
<span class="cap__meta" data-meta></span>
</figcaption>
</figure>
</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.
13 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 foto dalla fessura» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta, con in alto a sinistra il nome di uno studio di fotografia inventato, Lumen. Sotto il punto dove starà la foto sale la didascalia, Stairs at noon, sottile e grigia, come in attesa. Al centro una riga rossa di un pixel si disegna dal mezzo verso l’alto e verso il basso: è una fessura. Si apre: la colonna di mezzo della foto si allarga dalla riga, e le due righe rosse si separano seguendone i bordi. Poi le altre colonne si aprono a coppie, una a sinistra e una a destra, verso l’esterno: ogni colonna parte dal bordo di quella vicina e si allarga con una molla che va un pixel oltre il suo posto e torna, mentre la foto dentro è trascinata verso la fessura e si assesta un attimo dopo; quando una colonna si posa, quella accanto sente il colpo e si sposta di un pixel. Fra una colonna e l’altra per un momento resta un filo di carta, così la foto arriva a strisce. Le righe rosse arrivano sui bordi della foto e svaniscono, e la didascalia prende peso da sinistra a destra: ogni lettera passa da sottile a semigrassetto con un piccolo elastico, si stringe un poco e diventa nera; a destra compare una riga piccola coi dati dello scatto. La foto, fatta dallo script su una canvas, è un muro bianco al sole di mezzogiorno con una scala e la sua ombra, un cielo blu, una porta ad arco nell’ombra. Dopo qualche secondo tutto torna nella fessura: la didascalia torna sottile, le colonne si chiudono dall’esterno verso il centro, la riga si chiude e si ricomincia. Col mouse sopra la foto ferma le colonne vicine al puntatore si scostano di qualche pixel, come se la fessura volesse riaprirsi lì; un clic sulla foto la richiude e la riapre.
Come funziona
Una foto, tante colonne
La foto è divisa in COLUMNS colonne, sempre dispari perché una stia sulla fessura. Ogni colonna è un div con la sua finestra (clip-path: inset()) e dentro un figlio con la foto intera come sfondo, spostato a sinistra di quanto la colonna è lontana dal bordo: così le colonne aperte combaciano al pixel. I bordi delle colonne sono su pixel interi, e la foto dentro è un po’ più larga (MARGIN per lato), così quando viene trascinata non scopre mai la carta.
La finestra che si apre
Ogni colonna ha due numeri, l e r, i bordi della finestra in pixel dal suo lato sinistro. Chiusa, la finestra sta sul bordo che guarda la fessura (quella di mezzo è una riga sul suo centro). Aprendosi il bordo esterno corre con power3.out fino a OVERSHOOT pixel oltre il suo posto, poi torna con sine.inOut: inset() accetta valori negativi, quindi la finestra esce davvero di un pixel dalla colonna e mostra la foto vera, non un vuoto.
Le colonne sfalsate
La colonna di mezzo parte per prima; poi le altre, a coppie, a STAGGER secondi l’una dall’altra. Ognuna parte dal bordo di arrivo di quella vicina prima che questa abbia finito, e fra le due resta per un attimo un filo di carta: la foto arriva a strisce. Intanto la foto dentro la colonna parte spostata di DRAG pixel verso la fessura e si assesta con expo.out, e quando una colonna si posa quella più interna fa un pixel verso l’esterno e torna con un elastico.
Le due righe della fessura
Le righe rosse sono due elementi di un pixel. A ogni fotogramma il ticker di GSAP cerca, fra le colonne aperte, il bordo più a sinistra e quello più a destra e ci mette le righe appena fuori, così non coprono mai la foto. Quando le finestre sono chiuse le due righe coincidono e sono la fessura; all’inizio si disegnano con scaleY dal centro, alla fine si chiudono allo stesso modo.
La didascalia che prende peso
La didascalia è una riga di lettere separate in Archivo, un carattere variabile con gli assi wght e wdth. Ogni lettera ha due variabili CSS, --g e --w, lette da font-variation-settings. Mentre la foto si apre stanno a 220 e 112 (sottile e larga, in grigio); quando l’ultima colonna si posa GSAP porta --g a 640 con elastic.out e --w a 100, una lettera dopo l’altra, e il colore al nero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
IMAGE | script.js | '' | La foto: un indirizzo, o un file caricato nel Playground. Vuoto, la foto la disegna lo script. La cornice prende le proporzioni della foto. |
CAPTION | script.js | 'Stairs at noon' | La didascalia corta sotto la foto: prende peso quando l’ultima colonna si posa. |
META | script.js | 'f/11, 1/250 s' | La riga piccola a destra della didascalia. |
COLUMNS | script.js | 9 | In quante colonne si apre la foto (un numero pari ne prende una in più, perché una stia sulla fessura). |
STAGGER | script.js | 0.17 | I secondi fra una coppia di colonne e la successiva. |
OVERSHOOT | script.js | 1 | Di quanti pixel ogni colonna va oltre il suo posto prima di tornare (0 = si ferma secca). |
HOLD | script.js | 3 | Quanti secondi la foto resta intera prima di tornare nella fessura. |
LOOP | script.js | true | Se la foto si richiude e si riapre di continuo. Con false si apre una volta e resta (un clic la riapre). |
Quando usarla
Per presentare una foto sola come si deve: l’apertura del portfolio di un fotografo o di un architetto, la copertina di un reportage, la pagina di una mostra, la foto di una camera d’albergo o di un piatto in una pagina curata. Funziona con qualunque foto, anche caricata nel Playground.
Sul telefono
La stessa animazione con le misure adattate: la foto è larga quasi quanto lo schermo, le colonne sono più strette e la didascalia più piccola. Un tocco sulla foto ferma la richiude e la riapre.
Con il movimento ridotto
Niente si muove: la foto intera e la didascalia già col suo peso compaiono in dissolvenza e restano, senza fessura, colonne né molle.
Trappole
- Con overflow: hidden sulle colonne l’overshoot di un pixel non si vedeva: la finestra non poteva uscire dalla colonna. Le colonne non tagliano niente da sole, la finestra è solo il clip-path, e inset() con un valore negativo esce davvero oltre il bordo.
- Trascinata dentro la colonna, la foto della prima e dell’ultima colonna scopriva una striscia di carta sul bordo: la foto dentro ogni colonna è più larga di MARGIN pixel per lato, uguale per tutte, così combaciano lo stesso.
- Con le righe rosse messe sul bordo della finestra coprivano l’ultimo pixel della foto: stanno appena fuori, un pixel a sinistra del bordo sinistro e sul primo pixel dopo quello destro; quando la fessura è chiusa le due coincidono, altrimenti al centro si vedeva una riga di due pixel.
- Le righe seguivano un segno «colonna aperta» scritto da una funzione nella timeline: saltando nella timeline (il Playground, il video) quella funzione non partiva e le righe restavano al centro. Ora una colonna è aperta se la sua finestra è larga più di un ventesimo di pixel, letto a ogni fotogramma.
- Una foto caricata da un altro sito non si può ridisegnare su una canvas senza bloccarla: la foto va come sfondo CSS delle colonne, e solo quella fatta dallo script passa dalla canvas.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
