Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
L'articolo con la foto ferma
Scorri dentro l’anteprima
Un articolo di rivista in due colonne: a sinistra una foto ferma, a destra il testo diviso in capitoli. Quando un capitolo arriva a metà schermo la foto passa alla successiva con una tendina pulita, la didascalia fa scorrere le sue lettere e un piccolo indice coi nomi dei capitoli segna quello che stai leggendo.
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 article with the still photograph</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="testata">
<a class="testata__nome" href="#">Plinth</a>
<p class="testata__motto">Rooms, houses and the light in them</p>
<nav class="testata__voci" aria-label="Sections">
<a href="#">Houses</a><a href="#">Interiors</a><a href="#">Cities</a><a href="#">Archive</a>
</nav>
</header>
<section class="apertura" aria-labelledby="titolo">
<p class="apertura__occhiello" data-entra>Houses</p>
<h1 class="apertura__titolo" id="titolo" data-titolo>A house that waits for the tide</h1>
<p class="apertura__catenaccio" data-entra>On a bare stretch of the Atlantic coast, the architect Marta Ilves built a single long wall and let the weather finish the rest. We spent four days inside it.</p>
<p class="apertura__firma" data-entra><span>Words by <b>Ines Carvalho</b></span><span>Photographs by <b>Tomas Weir</b></span><span>October 2026, nine minutes</span></p>
</section>
<main class="articolo" data-articolo>
<aside class="foto" data-foto>
<div class="foto__palco">
<figure class="foto__cornice" data-cornice aria-hidden="true"></figure>
<div class="foto__piede">
<p class="foto__didascalia"><span class="foto__righe" data-didascalia></span><span class="foto__credito">Photograph: Tomas Weir for Plinth</span></p>
<nav class="indice" data-indice aria-label="Chapters">
<span class="indice__segno" data-segno aria-hidden="true"></span>
</nav>
</div>
</div>
</aside>
<div class="testo">
<section class="capitolo" data-capitolo="Arrival" data-foto-di="arrivo" data-didascalia-di="The north approach, across the dunes, just after six">
<h2 class="capitolo__titolo">Arrival</h2>
<p class="capitolo__primo">You see the wall before you see the house. It runs along the crest of the last dune like a line someone forgot to rub out, sixty-four metres of pale lime that catches the first light long before the sand does. From the road it could be a sea defence, or a ruin, or nothing at all.</p>
<p>Only when the track bends does the house reveal that it is there, folded behind the wall, low enough that the marram grass hides its lower edge. There is no front door to look for. There is a gap in the wall, a little wider than a person, and the path simply goes through it.</p>
<p>“I wanted the arrival to feel like finding shelter,” Ilves says, standing in that gap with the wind pulling at her coat. “Not like visiting a building. You walk along, and then the noise stops.”</p>
</section>
<section class="capitolo" data-capitolo="The wall" data-foto-di="muro" data-didascalia-di="Lime render over stone quarried two fields away">
<h2 class="capitolo__titolo">The wall</h2>
<p class="capitolo__primo">The wall is the whole idea, and almost the whole budget. It is built from a soft yellow stone taken from a field two farms inland, laid rough and then rendered by hand in three coats of lime, the last one barely thicker than paint.</p>
<p>Lime stays alive for years. It breathes out the damp of winter and drinks the salt of the spray, and slowly it hardens again from the air. Ilves left it unpainted on purpose: in a decade the seaward face will be a different colour from the landward one, and she is curious to see which.</p>
<p>In the low sun of the morning the surface shows every pass of the trowel. By noon it goes flat and white, almost blinding. The builders called it the long patience, because nothing on it could be hurried.</p>
</section>
<section class="capitolo" data-capitolo="The stair" data-foto-di="scala" data-didascalia-di="The stair, lit from a single slot in the roof">
<h2 class="capitolo__titolo">The stair</h2>
<p class="capitolo__primo">Inside, the house is a single room that turns a corner. A concrete stair climbs along the back of the wall to a sleeping loft, and above it a slot cut into the roof lets in one long blade of light.</p>
<p>At ten in the morning the blade lies across the fourth and fifth steps. By lunch it has climbed to the landing; in the afternoon it slides up the wall and fades. People who stay here, Ilves says, stop wearing watches by the second day.</p>
<p>The treads were cast in place with the boards still showing, so that bare feet find the grain of the timber in the stone. It is the warmest thing in a cold material, and the first thing every guest touches.</p>
</section>
<section class="capitolo" data-capitolo="The courtyard" data-foto-di="corte" data-didascalia-di="An old olive, kept where it stood">
<h2 class="capitolo__titolo">The courtyard</h2>
<p class="capitolo__primo">Halfway along, the wall opens around a small courtyard paved in the same stone. An olive tree that was here long before the house still stands in the middle of it; the plan was bent twice to keep it.</p>
<p>A shallow pool, no deeper than a hand, runs along one side. It holds the sky on still days and on windy ones it shivers into grey. Its real job is quieter: in August it cools the air that drifts into the kitchen through the open doors.</p>
<p>The shadow of the wall moves across the paving like the hand of a slow clock. In the morning the courtyard is in shade; by four it is full of light, and the olive throws its shadow back onto the lime.</p>
</section>
<section class="capitolo" data-capitolo="Evening" data-foto-di="sera" data-didascalia-di="The house at dusk, from the edge of the water">
<h2 class="capitolo__titolo">Evening</h2>
<p class="capitolo__primo">At dusk the house turns itself inside out. The wall goes dark against the sky and the long window behind it lights up, a single warm line along the dune, the only light for a long way in either direction.</p>
<p>The tide comes in quietly here, over a flat beach, and on the highest springs it reaches the foot of the dune. Ilves set the floor exactly one step above the worst water anyone in the village could remember. So far, she says, the sea has agreed.</p>
<p>We left on the fourth morning, through the gap in the wall. Looking back from the road, it was already a line again, pale, patient, waiting for the light.</p>
</section>
</div>
</main>
<footer class="fine">
<p class="fine__nota">Marta Ilves Studio. Structural engineering by Halden & Roe. The house can be rented for a week in spring and autumn.</p>
<p class="fine__testata">Plinth</p>
</footer>
<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/gsap@3.15.0/dist/CustomEase.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 «L'articolo con la foto ferma» da Animorio e adattala al mio sitoCosa fa
Un servizio della rivista di architettura Plinth su una casa lungo l'oceano: testata, occhiello, un grande titolo in serif che sale parola per parola, il catenaccio in corsivo e le firme. Poi l'articolo in due colonne. A sinistra la foto resta ferma mentre scorri, alta quasi quanto lo schermo, con sotto la didascalia, il credito del fotografo e l'indice dei cinque capitoli: Arrival, The wall, The stair, The courtyard, Evening. A destra i paragrafi scorrono, ogni capitolo col suo sottotitolo e il capolettera. Quando un capitolo arriva a metà schermo, la foto nuova sale dal basso dentro una tendina, partendo un poco più grande e assestandosi, mentre quella vecchia viene spinta appena in su; le lettere della didascalia vecchia scivolano via verso l'alto e quelle nuove salgono una dopo l'altra; il segno d'inchiostro dell'indice corre sul nome nuovo con un piccolo rimbalzo, e il capitolo che leggi è pieno mentre gli altri restano tenui. Tornando indietro la tendina scende, e se la foto di prima è ancora sotto la tendina si riavvolge. I nomi dell'indice portano al loro capitolo. Le cinque foto (le dune all'alba, il muro di calce, la scala con la lama di luce, il cortile con l'ulivo, la casa al tramonto) sono disegni SVG a strati con sfumature, nebbia, luce e grana.
Come funziona
Una colonna ferma senza pin
L'articolo è una griglia a due colonne. La colonna della foto ha position: sticky, top 0, altezza 100lvh e align-self: start: resta ferma mentre il testo scorre accanto, senza spacer e senza ricalcoli. Dentro, la cornice prende tutto lo spazio che avanza sopra la didascalia e l'indice.
Il capitolo che si legge
Ogni capitolo ha un suo ScrollTrigger con start «top 50%» e end «bottom 50%»: è attivo finché attraversa la riga a metà schermo, e i capitoli si toccano, quindi ce n'è sempre uno solo. Quando uno diventa attivo partono la tendina, la didascalia, l'indice e le opacità dei capitoli.
La tendina
Ogni foto è uno strato assoluto nella cornice. Quello nuovo va sopra gli altri con clip-path: inset(100% 0% 0% 0%), cioè chiuso, e GSAP lo apre fino a inset(0% 0% 0% 0%) con una curva lenta all'inizio e alla fine. Intanto l'SVG dentro lo strato va da scale 1,08 a 1, un poco più a lungo della tendina, e la foto vecchia sale di un 5%. Scorrendo all'indietro la tendina va nel verso opposto.
Lettere in finestre piccole
La didascalia è spezzata in parole con overflow: hidden e lettere in inline-block. La riga vecchia e quella nuova stanno nella stessa cella di una griglia: le lettere vecchie salgono fuori dalla loro parola (yPercent −115) e quelle nuove arrivano da sotto, con un piccolo ritardo l'una dall'altra. L'indice invece è un filetto con un segno d'inchiostro che si sposta sulla voce attiva con back.out.
Il telefono
Sotto i 760 pixel la griglia diventa una colonna: la foto sta in alto, sticky, alta il 34% dello schermo, con la didascalia e l'indice in riga che scorre da solo fino al nome attivo. Siccome sotto la foto resta meno spazio, la riga di lettura scende al 70% dello schermo, a metà del testo che si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
CURTAIN_TIME | script.js | 1.1 | Quanti secondi impiega la tendina a coprire la foto vecchia. |
CURTAIN_EASE | script.js | 0.76, 0, 0.18, 1 | La curva della tendina: lenta a partire e lenta ad arrivare. |
START_SCALE | script.js | 1.08 | Quanto è grande la foto nuova quando entra, prima di assestarsi a 1. |
DIM_OPACITY | script.js | 0.28 | L'opacità dei capitoli che non stai leggendo (1 = tutti pieni). |
DIRECTION | script.js | up | Dove va la tendina: up (sale dal basso), down, left o right. Scorrendo all'indietro va nel verso opposto. |
LETTER_STAGGER | script.js | 0.012 | Secondi fra una lettera della didascalia e la successiva. |
data-foto-di e data-didascalia-di | index.html | 5 capitoli | Su ogni capitolo: quale foto mostra e la sua didascalia. Il nome nell'indice è data-capitolo. Le foto si possono sostituire con fotografie vere (un img con object-fit: cover nello strato). |
Quando usarla
Per un long-read, un reportage, la storia di un progetto o di un ristorante, una pagina «chi siamo» a capitoli: ogni volta che a ogni parte del testo corrisponde un'immagine e si vuole che la pagina resti calma.
Sul telefono
Una colonna sola: la foto sta in alto, ferma e più bassa (un terzo dello schermo), con la didascalia e l'indice in riga sotto; il testo scorre sotto la foto. Tendina, scala, lettere e indice sono gli stessi; la riga che decide il capitolo scende al 70% dello schermo.
Con il movimento ridotto
Niente tendina, niente scala, niente lettere che scorrono e niente scorrimento morbido: la foto nuova compare in dissolvenza sopra la vecchia, la didascalia cambia con una dissolvenza e il segno dell'indice salta al suo posto. I capitoli si accendono e si spengono lo stesso, in dissolvenza.
Trappole
- Per un elemento sticky dentro una griglia serve align-self: start, o la cella si allunga quanto la riga e non ha spazio per restare ferma.
- GSAP anima clip-path solo fra due valori con la stessa forma: scrivi sempre inset con quattro percentuali (inset(100% 0% 0% 0%) e inset(0% 0% 0% 0%)), non «inset(0)».
- La scala va sull'SVG dentro lo strato, non sullo strato che ha il clip-path: altrimenti la tendina si ingrandisce insieme alla foto e il bordo non sale dritto.
- Se scorri veloce e torni indietro mentre la tendina è a metà, non farla ripartire da chiusa: se la foto da mostrare è quella ancora sotto, basta riavvolgere la timeline (reverse).
- Una transizione CSS su opacity sullo stesso elemento che GSAP fa entrare con from() lo lascia trasparente: le voci dell'indice cambiano solo colore in CSS, l'opacità la tocca solo GSAP.
- Sul telefono la foto in alto copre metà schermo: lasciare la riga di lettura a metà schermo farebbe cambiare capitolo quando il titolo è ancora nascosto sotto la foto.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP + ScrollTrigger + CustomEase 49 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.
