Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
La foto che esce dai pixel
Scorri dentro l’anteprima
Animazione di scroll e di immagini nello stile minimal: in una rivista di fotografie inventata ogni foto sale nella pagina fatta di pochi blocchi di colore e, mentre sale, si raffina a scatti netti, 4, 8, 16, 32 blocchi e oltre, fino a essere nitida; a ogni scatto la cornice si assesta. Accanto, un contatore sottile dice quanti blocchi ci sono e alla fine diventa la 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>The photo that comes out of the pixels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up journal of photographs, Coarse. Every picture arrives in big blocks of colour and sharpens in steps
as it rises up the screen; the small counter beside it says how many blocks there are, and turns into the
caption when the picture is sharp. The pictures are drawn by the script -->
<header class="testa">
<a class="marchio" href="#" data-entra>Coarse</a>
<p class="testa__nota" data-entra>Photographs, slowly</p>
</header>
<main class="pagina">
<section class="apertura">
<h1 class="titolo" data-entra>Look closer.</h1>
<p class="sotto" data-entra>Five pictures that only show themselves as you come near.</p>
</section>
<figure class="foto" data-foto="salt" data-shape="1.5">
<div class="foto__cornice" data-cornice><canvas class="foto__tela" data-tela aria-label="Salt flats with low hills and the sun"></canvas></div>
<figcaption class="foto__dida"><span class="foto__conto" data-conto></span><span class="foto__nome" data-nome>Salt flats, before seven</span><span class="foto__riga" data-riga></span></figcaption>
</figure>
<figure class="foto" data-foto="stairs" data-shape="0.8">
<div class="foto__cornice" data-cornice><canvas class="foto__tela" data-tela aria-label="A stairwell seen from above"></canvas></div>
<figcaption class="foto__dida"><span class="foto__conto" data-conto></span><span class="foto__nome" data-nome>The stairwell at noon</span><span class="foto__riga" data-riga></span></figcaption>
</figure>
<figure class="foto" data-foto="pears" data-shape="1.25">
<div class="foto__cornice" data-cornice><canvas class="foto__tela" data-tela aria-label="Three pears on a table"></canvas></div>
<figcaption class="foto__dida"><span class="foto__conto" data-conto></span><span class="foto__nome" data-nome>Three pears</span><span class="foto__riga" data-riga></span></figcaption>
</figure>
<figure class="foto" data-foto="pool" data-shape="1.5">
<div class="foto__cornice" data-cornice><canvas class="foto__tela" data-tela aria-label="An empty swimming pool lane"></canvas></div>
<figcaption class="foto__dida"><span class="foto__conto" data-conto></span><span class="foto__nome" data-nome>Lane four, empty</span><span class="foto__riga" data-riga></span></figcaption>
</figure>
<figure class="foto" data-foto="barley" data-shape="0.8">
<div class="foto__cornice" data-cornice><canvas class="foto__tela" data-tela aria-label="Rows of barley running to the horizon"></canvas></div>
<figcaption class="foto__dida"><span class="foto__conto" data-conto></span><span class="foto__nome" data-nome>Barley rows in August</span><span class="foto__riga" data-riga></span></figcaption>
</figure>
<p class="fine">That is all for this autumn.</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
22 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 che esce dai pixel» da Animorio e adattala al mio sitoCosa fa
La pagina di Coarse, una piccola rivista di fotografie inventata, su un bianco caldo: in cima il nome, il titolo «Look closer.», stretto, che arriva dal basso e si allarga, e una riga sotto. Scendendo arrivano cinque foto, una sotto l’altra, alternate a destra e a sinistra: delle saline con il sole basso, una tromba delle scale vista dall’alto, tre pere su un tavolo, la corsia vuota di una piscina, un campo d’orzo. Ognuna entra dal fondo dello schermo fatta di quattro blocchi di colore in larghezza, divisi da fili chiari come un mosaico; mentre sale si raffina a scatti netti, 8, 16, 32, 64, 128 blocchi, e a ogni scatto la cornice si gonfia di un niente e torna su una molla. Accanto alla foto un contatore sottile dice quanti blocchi ci sono, per esempio «32 × 21», e ogni volta sale di un passo, più pieno e più largo. Quando la foto arriva in alto è nitida: il contatore lascia il posto alla didascalia, che arriva stretta e si allarga, e sotto si disegna una riga sottile vermiglio. Risalendo, la foto torna a blocchi e la didascalia torna un numero.
Come funziona
Le foto disegnate
Le cinque foto sono nostre: lo script le disegna su canvas nascosti grandi quanto la cornice (per la densità dello schermo), con gradienti, ellissi e linee, e ci aggiunge una grana leggera con un generatore di numeri a seme, così ogni foto è sempre uguale. Al cambio di misura della finestra si ridisegnano alla misura nuova.
Il colore medio di ogni blocco
Per uno scatto con bx blocchi in larghezza la foto si rimpicciolisce a metà, poi ancora a metà, fino ad avvicinarsi a bx per by, sempre con imageSmoothingQuality alta: così ogni blocco è davvero la media della sua zona e non il colore di un pixel a caso. Poi la piccola si ridisegna sulla tela grande con imageSmoothingEnabled a false, e i blocchi restano netti. Ogni scatto si calcola una volta e si tiene da parte.
Gli scatti legati allo scroll
Ogni foto ha un tween su un numero da 0 a 1 con ScrollTrigger e scrub, da quando la cornice entra dal fondo a quando la sua cima arriva al 30 per cento dello schermo. Il numero, moltiplicato per gli scatti, dice a che scatto si è: si ridisegna solo quando lo scatto cambia. Lenis ammorbidisce lo scroll e passa i suoi movimenti a ScrollTrigger.
L’assestamento e la didascalia
A ogni scatto la cornice parte appena più grande (o più piccola, tornando indietro) e torna a uno con elastic.out, e il contatore arriva da sotto con back.out. Peso e larghezza del contatore sono due variabili CSS che crescono con lo scatto. Quando la foto è nitida il contatore si svuota, la didascalia arriva con font-stretch da 70 a 88 per cento e la riga si allarga con expo.out; risalendo tutto torna indietro.
Movimento ridotto
Con prefers-reduced-motion niente Lenis e niente scatti: le foto sono già nitide, le didascalie e le righe già al loro posto, e la testata compare in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_BLOCKS | script.js | 4 | Quanti blocchi in larghezza ha una foto quando entra. |
STEPS | script.js | 6 | Quanti scatti a pixel prima di essere nitida (ogni scatto raddoppia i blocchi). |
SHARP_AT | script.js | 0.3 | Dove deve arrivare la cima della foto per essere nitida, in frazione dello schermo dall’alto. |
SETTLE | script.js | 0.012 | Quanto si gonfia la cornice a ogni scatto prima di assestarsi (0 = ferma). |
GRID | script.js | true | I fili chiari fra i blocchi grandi, come un mosaico. |
GRAIN | script.js | 0.05 | Quanta grana hanno i disegni. |
SMOOTH | script.js | 0.09 | Quanto è morbido lo scroll (più piccolo = più morbido). |
Quando usarla
Per la galleria di un fotografo, di una rivista o di uno studio, una pagina di progetti con poche immagini grandi, un articolo lungo con le foto fra i paragrafi: le immagini si guadagnano lo sguardo di chi scende.
Sul telefono
La stessa animazione con le foto a tutta larghezza e la didascalia sotto; gli scatti sono gli stessi e le foto si ridisegnano alla misura dello schermo.
Con il movimento ridotto
Niente scatti e niente scroll ammorbidito: le foto sono già nitide con le loro didascalie e le righe sotto.
Trappole
- Rimpicciolire una foto grande in un colpo solo fino a quattro blocchi dà il colore di pochi pixel a caso, non la media: i blocchi sfarfallavano da un ridisegno all’altro. Ora si dimezza a passi, come fa una mipmap.
- Il carattere per moltiplicazione scritto come sequenza col barra-u diventava il carattere vero nel file: si scrive con String.fromCharCode(215).
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 21 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.
