Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
La galleria orizzontale del reportage
Scorri dentro l’anteprima
In un reportage di giornale la pagina si ferma e, scorrendo in giù, una fila di sette foto impaginate come un menabò scorre di lato: ogni foto si sposta meno della sua cornice, quella al centro si ingrandisce e prende tutto il colore, una linea sottile sotto la fila dice a che punto della costa sei.
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 reportage gallery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/source-serif-4@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/source-serif-4@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a long read in a made-up coastal magazine, Tidewater. In the middle the page stops: while you scroll down, a row
of seven photographs laid out like a page proof slides sideways. Each picture moves a little less than its frame,
the one nearest the middle grows and takes its full colour, a thin line underneath tells how far along the coast
you are. The photographs are drawn by the script as layered SVG -->
<header class="testata">
<p class="testata__nome">Tidewater</p>
<p class="testata__motto">A journal of coasts and the people who work them</p>
</header>
<main>
<article class="articolo">
<header class="apertura">
<p class="apertura__occhiello" data-entra>Reportage</p>
<h1 class="apertura__titolo" data-titolo>The salt road</h1>
<p class="apertura__catenaccio" data-entra>Seven days along a coast where the sea is still farmed by hand, from the salt pans of Marrow Bay to the last house on Kell Head.</p>
<p class="apertura__firma" data-entra>Words and photographs by <a href="#" class="firma">Ines Arlow</a><span class="apertura__tempo">Twelve minute read</span></p>
</header>
<div class="testo">
<p class="testo__primo">The rakers at Marrow Bay start before five. By then the crust on the pans has hardened in the night air, and it breaks clean under the wooden blade with a sound like stepping on frost. Arthur Penhale has worked these flats for thirty-one years, and his father before him; he still checks the brine with the back of his hand, the way you would check a bath for a child.</p>
<p>The road south from the bay is not really a road. It is a chain of footpaths, causeways and farm tracks that used to carry salt to the market towns inland, and most of it now carries nobody at all. I walked it over seven days in late September, with one camera, two lenses and a notebook that got wetter every afternoon.</p>
<p>What follows is the coast as it came, one stop at a time.</p>
</div>
</article>
<!-- the gallery: the section is tall, the stage inside it sticks for the whole length of the scroll -->
<section class="galleria" data-galleria aria-label="The salt road, in seven pictures">
<div class="palco">
<div class="palco__testa">
<span>Tidewater <i>Reportage</i></span>
<span class="palco__titolo">The salt road, in seven pictures</span>
</div>
<div class="palco__finestra" data-finestra>
<div class="binario" data-binario>
<div class="apri" data-apri>
<p class="apri__occhiello">Portfolio</p>
<h2 class="apri__titolo">Seven days, <em>one coast</em></h2>
<p class="apri__testo">From Marrow Bay to Kell Head, on foot. Keep scrolling and walk it with her.</p>
<svg class="apri__freccia" viewBox="0 0 64 16" aria-hidden="true"><path d="M1 8h60M53 1.5 61.5 8 53 14.5"/></svg>
</div>
<figure class="foto" style="--r: 1.5; --h: .5; --y: .34" data-foto="saline">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Marrow Bay</span> Salt pans at first light. The rakers start before five, while the crust is still cold. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: .8; --h: .78; --y: .02" data-foto="faro">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Gull Rock</span> The light on the point, in a fog that sits there until noon. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: 1.7778; --h: .44; --y: .5" data-foto="porto">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Sennick harbour</span> The last boats in before the tide turns. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: .6667; --h: .84; --y: .1" data-foto="cucina">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Lower Fennick</span> Lunch at the Prowse farm: bread, lemons and a jug that has never left the table. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: 1.25; --h: .58; --y: .3" data-foto="scogliera">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">The Teeth</span> From the cliff path, a crabber heading for open water. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: .75; --h: .74; --y: .06" data-foto="vicolo">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Port Elvan</span> Lanes too narrow for anything but feet and washing lines. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
<figure class="foto" style="--r: 1.5; --h: .52; --y: .4" data-foto="capo">
<div class="foto__cornice"><div class="foto__scorre"></div></div>
<figcaption class="foto__dida"><span class="foto__luogo">Kell Head</span> After sunset. One house, one lamp, and nothing west of it but the sea. <span class="foto__fonte">Ines Arlow for Tidewater</span></figcaption>
</figure>
</div>
</div>
<div class="corso" data-corso>
<span class="corso__luogo">Marrow Bay</span>
<div class="corso__linea" data-linea>
<span class="corso__pieno" data-pieno></span>
</div>
<span class="corso__luogo">Kell Head</span>
</div>
</div>
</section>
<article class="articolo articolo--dopo">
<div class="testo">
<p>At Kell Head the path simply stops. There is a stile, a field of sheep that do not look up, and a single house whose owner, Maud Treloar, has kept a lamp in the west window every night since her husband went out with the pilchard boats in 1974 and came back late. She knows it is not needed any more. She lights it anyway.</p>
<blockquote class="citazione" data-citazione>
<p>The coast does not end. It just runs out of people to tell you where you are.</p>
</blockquote>
<p>Over the week I met eleven people still making a living from this water: three rakers, two crabbers, a lighthouse keeper with nothing left to keep, a baker and four members of one family who have turned a sardine cellar into a smokehouse. None of them would call it a dying trade. Most of them said, in one way or another, that it was simply a slow one.</p>
<p>On the last morning the fog came in again over Gull Rock, and the salt road behind me disappeared into it one headland at a time. It seemed the right way to leave.<svg class="fine" viewBox="0 0 10 10" aria-hidden="true"><rect x="1" y="1" width="8" height="8"/></svg></p>
</div>
<footer class="nota">
<p>Ines Arlow travelled at her own expense. Some names have been changed at the request of the people who carry them.</p>
</footer>
</article>
</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.
58 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 orizzontale del reportage» da Animorio e adattala al mio sitoCosa fa
Un lungo articolo di Tidewater, una rivista inventata sulle coste e su chi ci lavora: testata, occhiello, un titolo grande che sale riga per riga dalla sua linea di base, catenaccio, firma e i primi paragrafi con il capolettera. A metà articolo arriva una fascia color carta più scura e la pagina si ferma: mentre scorri in giù, la fila delle foto scorre da destra a sinistra. Si apre con un piccolo cartello («Seven days, one coast») e poi sette fotografie del viaggio, orizzontali e verticali, alte in modo diverso e a quote sfalsate come nel menabò di una rivista: le saline all’alba, un faro nella nebbia, il porto al tramonto, una natura morta in cucina, la scogliera vista dall’alto, un vicolo bianco con i panni stesi, un capo dopo il tramonto con una sola finestra accesa. Ogni foto ha sotto la sua didascalia con il luogo, una riga e la fonte. Dentro ogni cornice l’immagine scorre al contrario, così si muove meno della cornice e sembra più lontana. La foto più vicina al centro dello schermo si ingrandisce un poco e ha tutti i suoi colori, le altre restano un po’ spente; la didascalia si accende con lei. Sotto la fila corre una linea sottile, con Marrow Bay a sinistra e Kell Head a destra: si riempie mentre avanzi e una tacca per foto si allunga quando quella foto passa al centro. Finita la fila, la pagina riparte e l’articolo continua, con una citazione il cui filetto si disegna e il quadratino rosso di fine articolo.
Come funziona
Una sezione alta e un palco fermo
La sezione della galleria è alta (1 + LENGTH) schermi, misurati in lvh, e dentro c’è un palco position: sticky alto 100lvh: mentre la sezione scorre il palco resta fermo, senza pin di ScrollTrigger e senza salti su Safari, dove lvh non cambia quando compare e sparisce la barra degli indirizzi. Il palco è una griglia di tre righe: la testatina della rivista, la finestra con la fila e la linea dei luoghi.
Un menabò fatto con tre numeri
Ogni foto ha nello stile in linea il suo rapporto (--r), la sua altezza (--h) e la sua quota (--y), come frazioni di una misura sola, --t, l’altezza della finestra meno lo spazio delle didascalie. Larghezza, altezza e margine in alto sono calc() di questi tre numeri: la fila si impagina da sola su ogni schermo e sul telefono basta cambiare --t.
Un solo tween che fa da guida
Un tween porta un valore p da 0 a 1 con ease none e uno ScrollTrigger con scrub (SCRUB secondi di ritardo, morbido anche con Lenis). Da p si calcola tutto a ogni fotogramma: la fila si sposta di corsa per p, dove corsa è la distanza fra la prima posizione e quella con l’ultima foto al centro. Le posizioni delle foto si misurano una volta (offsetLeft e offsetWidth, che le trasformazioni non toccano) a ogni refresh: durante lo scroll non si legge niente dal layout.
Parallasse, scala e colore dalla distanza
Per ogni foto d è la distanza del suo centro dal centro dello schermo. Dentro la cornice c’è un contenitore più largo di una frazione M per lato, che si sposta di −d diviso mezzo schermo per M per la larghezza: l’immagine va meno veloce della cornice e non mostra mai i bordi. Da d nasce anche f, 1 al centro e 0 lontano, con una curva smoothstep: la cornice si ingrandisce di FOCUS_SCALE per f, l’immagine ha saturate(1 − DESATURATE per (1 − f)) e la didascalia scende di quanto è cresciuta la foto, così non ci finisce sotto.
Foto disegnate e la linea dei luoghi
Le sette fotografie sono SVG a strati costruiti dallo script: cieli a più fermate, foschia e bagliori con feGaussianBlur, riflessi capovolti, vignettatura e grana di pellicola (feTurbulence in overlay). Ognuna diventa un Blob e un’immagine una volta sola, così sfocature e grana si calcolano una volta e lo scroll resta leggero. La linea sotto la fila è un filetto con sopra un secondo filetto in scaleX(p); le tacche stanno dove ogni foto passa al centro e si allungano con la sua f.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PARALLAX | script.js | 1 | Quanto l’immagine scorre al contrario dentro la sua cornice: 0 la tiene ferma nella cornice, 2 la fa sembrare molto lontana (l’immagine si allarga per non mostrare i bordi). |
FOCUS_SCALE | script.js | 1.08 | Quanto si ingrandisce la foto più vicina al centro (1 = tutte uguali). |
DESATURATE | script.js | 0.5 | Quanto sono spente le foto lontane dal centro: 0 tutte a colori, 1 in bianco e nero. |
LENGTH | script.js | 4 | Quanti schermi di scroll dura la galleria: con più schermi la fila scorre più lenta. |
SCRUB | script.js | 0.9 | I secondi che la fila impiega a raggiungere lo scroll: 0 la incolla allo scroll, 2 la fa scivolare dietro con calma. |
Quando usarla
Per i reportage e i lunghi articoli con le foto, il portfolio di un fotografo, il diario di un viaggio, le pagine di una rivista online, di un’agenzia di viaggi o di un festival: ogni volta che una serie di immagini va guardata in fila, una alla volta, senza uscire dalla lettura.
Sul telefono
La stessa galleria con le misure adattate: le foto sono misurate su un’altezza che non supera la larghezza dello schermo, così anche la più larga ci sta intera al centro; il cartello d’apertura è più stretto e la testatina perde il titolo a destra. Lo scroll col dito la fa scorrere come col mouse.
Con il movimento ridotto
Niente scorre da solo: la pagina non si ferma, la fila diventa una striscia da far scorrere di lato col dito o col trackpad, tutte le foto sono a colori e alla loro grandezza, senza parallasse, e la linea dei luoghi segue la striscia. I testi compaiono solo in dissolvenza.
Trappole
- Le sfocature e la grana delle foto, lasciate come SVG in linea, si ricalcolavano a ogni fotogramma mentre la fila scorreva e si ingrandiva: trasformate una volta in immagine (Blob e URL) si disegnano una volta sola e lo scroll resta fluido.
- Con la foto al centro più grande, la didascalia sotto veniva coperta dal bordo della foto: scende con la metà di quanto la foto è cresciuta in altezza.
- Le posizioni lette con getBoundingClientRect cambiano con la scala e con lo spostamento della fila: si usano offsetLeft e offsetWidth, che le trasformazioni non toccano, e si rileggono solo al refresh di ScrollTrigger.
- Un parallasse più forte del margine dell’immagine mostrava il fondo della cornice: il contenitore dell’immagine si allarga con PARALLAX, e lo spostamento si ferma quando la foto è uscita dallo schermo.
- Sul telefono la foto più larga (16:9), misurata solo sull’altezza dello schermo, era più larga dello schermo stesso: la misura di riferimento è il minore fra l’altezza disponibile e poco più della larghezza.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Source Serif 4 (font variabile) 5.3.0, Inter Tight (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 18 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 12 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.
