Certificati che si impilano
Hover, Immagini
NuovaGratis
Torna alla libreria
La galleria di foto istantanee che si sviluppano al passaggio
Una galleria di foto istantanee nello stile minimal: su un tavolo bianco caldo tre stampe con la cornice bianca sono ancora grigio-azzurre e vuote. Passandoci sopra col puntatore, ognuna si sviluppa piano dai bordi verso il centro, prima i blu e poi i colori caldi, come una vera istantanea; scuoterla col puntatore la fa andare più in fretta. Sviluppata resta, e sotto la cornice si scrive a mano la sua didascalia.
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>Pellen</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/caveat@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- three instant photos, still grey and blank: passing over one (or shaking the pointer over it) develops it
from the edges inwards, the blues first and the warm colours later; once developed it stays, and a handwritten
caption writes itself under the frame -->
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio" data-entra>Pellen</p>
<p class="testa__nota" data-entra>Instant prints</p>
</header>
<section class="fila" data-fila aria-label="Three instant photos">
<figure class="istantanea" data-foto="mare">
<div class="istantanea__ombra" data-ombra></div>
<div class="istantanea__corpo">
<canvas class="istantanea__tela" aria-label="The sea at low tide, at dusk" data-tela></canvas>
<figcaption class="istantanea__scritta" data-scritta>low tide, 7pm</figcaption>
</div>
</figure>
<figure class="istantanea" data-foto="sedia">
<div class="istantanea__ombra" data-ombra></div>
<div class="istantanea__corpo">
<canvas class="istantanea__tela" aria-label="A chair in the sun against a wall" data-tela></canvas>
<figcaption class="istantanea__scritta" data-scritta>the chair, noon</figcaption>
</div>
</figure>
<figure class="istantanea" data-foto="vaso">
<div class="istantanea__ombra" data-ombra></div>
<div class="istantanea__corpo">
<canvas class="istantanea__tela" aria-label="A clay vase with a branch on a table" data-tela></canvas>
<figcaption class="istantanea__scritta" data-scritta>vase, may</figcaption>
</div>
</figure>
</section>
<footer class="piede">
<p class="nota" data-entra data-nota>Hover to develop, shake to hurry it</p>
<p class="stato" data-entra><span data-conta>0</span> of 3 developed</p>
</footer>
</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.
21 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 di foto istantanee che si sviluppano al passaggio» da Animorio e adattala al mio sitoCosa fa
Pellen è un negozio inventato di stampe istantanee. Su un tavolo bianco caldo ci sono tre foto quadrate con la cornice bianca, un po' storte come appena posate: il mare a marea bassa al tramonto, una sedia al sole contro un muro, un vaso di terracotta con un ramo. Ma non si vede ancora niente: sono grigio-azzurre e vuote, come un'istantanea appena uscita. Passandoci sopra il puntatore, la foto si alza di qualche pixel, si raddrizza un poco e comincia a svilupparsi: l'immagine affiora prima ai bordi e poi al centro, e i colori arrivano a strati, prima i blu, poi i verdi, infine i rossi e i gialli caldi, mentre la grana si calma. Se si scuote il puntatore sopra, come si scuote una vera istantanea, va più in fretta. Quando è sviluppata la stampa si assesta di un pixel, resta così, e sotto la cornice si scrive a mano la didascalia in inchiostro blu, l'unico colore della pagina oltre alle foto. In basso si legge quante foto sono sviluppate; dopo qualche secondo con tutte e tre pronte, le foto tornano grigie e si ricomincia. Quando nessuno muove il puntatore, un puntatore finto passa da una foto all'altra e le strofina.
Come funziona
Le tre foto, disegnate una volta
Le foto non si caricano: ognuna è disegnata una volta su una tela piccola di 144 per 144 con il canvas, a gradienti e forme semplici, e se ne tengono i pixel. La tela vera sulla pagina è più grande e riceve la foto ingrandita con lo smussamento alto, così resta morbida a ogni misura.
Lo sviluppo dai bordi
Ogni foto ha un numero, p, da 0 a 1. Per ogni pixel lo sviluppo locale vale p·(1+EDGES) − EDGES·(1 − b), dove b è quanto il pixel è vicino al bordo, con una piccola ondulazione: i bordi arrivano prima, il centro per ultimo, e il fronte non è un quadrato perfetto.
I colori a strati
Dallo sviluppo locale nascono tre curve morbide: il blu parte subito, il verde a metà di WARMTH e il rosso dopo WARMTH. Ogni canale va dal grigio-azzurro dell'emulsione al colore vero col suo tempo, così la foto passa da fredda a calda come un'istantanea vera; la grana, un rumore fisso per pixel, si calma man mano.
Il passaggio e la scossa
A ogni fotogramma si guarda se il puntatore è sopra la foto o la sua cornice: se sì, p cresce di dt/DEVELOP, moltiplicato per 1 + SHAKE volte la velocità del puntatore (fino a tre volte). Entrando la foto sale di 5 pixel e si raddrizza con elastic.out, l'ombra si allarga; uscendo torna storta.
La didascalia e il ritorno
A p uguale a 1 la stampa scende di un pixel e torna con una molla, e la didascalia in Caveat si scrive da sinistra con un clip-path in un secondo e mezzo. Con tutte e tre pronte, dopo RESET secondi le didascalie si cancellano e le foto tornano a p = 0 una dopo l'altra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DEVELOP | script.js | 2.6 | In quanti secondi di passaggio una foto si sviluppa tutta. |
SHAKE | script.js | 1 | Quanto scuotere il puntatore fa andare più in fretta: 0 lo spegne. |
EDGES | script.js | 0.55 | Quanto i bordi si sviluppano prima del centro. |
WARMTH | script.js | 0.24 | Quanto più tardi dei blu arrivano i colori caldi. |
GRAIN | script.js | 0.05 | Quanto è granulosa l'emulsione mentre si sviluppa. |
TILT | script.js | 2.4 | Quanto sono storte le foto sul tavolo, in gradi. |
RESET | script.js | 4.5 | Dopo quanti secondi le foto sviluppate tornano grigie e si ricomincia. |
Quando usarla
Nella galleria di un fotografo o di un negozio di stampe, nel portfolio di uno studio, nella pagina dei ricordi di un hotel o di un evento: ovunque le foto devono arrivare con un gesto e non tutte insieme.
Sul telefono
La stessa animazione: le foto si misurano sulla larghezza e sull'altezza e stanno in fila nella casella. Il dito che tocca o strofina una foto la sviluppa; la frase in basso dice touch invece di hover.
Con il movimento ridotto
Le foto sono già sviluppate e ferme, con le didascalie scritte: niente movimento, niente puntatore finto, tutto compare in dissolvenza.
Trappole
- Ridisegnare a ogni fotogramma tutte le foto alla loro misura vera è caro: lo sviluppo si calcola su una tela piccola di 144 per 144 e solo quando p cambia, poi si ingrandisce con drawImage.
- La velocità del puntatore va smorzata e lasciata calare da sola, altrimenti un solo movimento brusco fa sviluppare la foto di colpo.
- GSAP anima la figura intera, mentre la cornice e la lucentezza stanno sul figlio: così il transform di GSAP non cancella quello del CSS.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0, Caveat (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
