Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
La foto stampata dal sole
Scorri dentro l’anteprima
Animazione di scroll per immagini nello stile minimal: una foto si stampa in cianotipia mentre si scorre. Il sole corre su un arco sottile e un timer conta i minuti, la carta coi sali di ferro diventa grigio azzurra dove la luce passa dal negativo, poi il negativo si solleva, un risciacquo scende sul foglio col bordo bagnato che ondeggia e la foto viene fuori in blu di Prussia, che si scurisce asciugando.
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>Ferro cyanotype print room</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up cyanotype print room, Ferro. The stage sticks while you scroll: a sheet coated in iron salts lies under a
negative and the sun runs along a thin arc; the paper turns grey-blue where the light gets through, the negative is
lifted away, a rinse runs down the sheet and the photo comes up in Prussian blue, then deepens as it dries. The
photo and the negative are drawn in the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#">Ferro</a>
<p class="testa__nota">Cyanotype print room</p>
</header>
<div class="cielo" data-cielo aria-hidden="true">
<svg class="arco" data-arco viewBox="0 0 100 30" preserveAspectRatio="none">
<path class="arco__guida" data-arco-guida d="M2 28 Q50 -10 98 28" />
<path class="arco__corsa" data-arco-corsa d="M2 28 Q50 -10 98 28" />
</svg>
<span class="sole" data-sole><span class="sole__disco"></span></span>
<span class="tempo" data-tempo>0:00</span>
</div>
<div class="foglio" data-foglio>
<canvas class="foglio__tela" data-tela role="img" aria-label="A cyanotype print of a hill with a lone tree, a low sun and a lake, coming up in Prussian blue"></canvas>
</div>
<ul class="passi" data-passi aria-hidden="true">
<li class="passo" data-passo>Expose</li>
<li class="passo" data-passo>Lift</li>
<li class="passo" data-passo>Rinse</li>
<li class="passo" data-passo>Dry</li>
</ul>
<div class="finale" data-finale>
<h1 class="finale__titolo" data-finale-titolo>Twelve minutes of sun.</h1>
<p class="finale__nota" data-finale-nota>Hill and lake, printed in iron salts on cotton paper.</p>
</div>
<p class="cenno" data-cenno><span>Scroll to print</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></p>
</div>
</section>
<footer class="piede">
<p>Ferro prints by hand, in the sun, one sheet at a time. Bring a negative or choose one of ours.</p>
</footer>
</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.
26 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 stampata dal sole» da Animorio e adattala al mio sitoCosa fa
Una pagina bianco caldo con in alto il nome di una stamperia di cianotipie inventata, Ferro. Al centro un foglio di carta di cotone col bordo appena sfrangiato e una stesura di sali di ferro giallo verdi, coi segni del pennello ai lati; sopra c’è una lastra di vetro col negativo di un paesaggio, e sopra ancora un arco tratteggiato con un piccolo sole e un timer a 0:00. Sotto il foglio quattro parole: Expose, Lift, Rinse, Dry. Scorrendo il sole corre lungo l’arco, la parte percorsa si colora di blu e il timer arriva a 12:00; la carta intorno al negativo e sotto le parti chiare della lastra diventa grigio azzurra, e l’ombra del vetro scivola sulla carta dalla parte opposta al sole, mentre un riflesso attraversa la lastra. Poi il negativo si solleva ruotando appena e sparisce. Un risciacquo scende dall’alto: il suo bordo bagnato ondeggia, ha una riga di luce e qualche goccia che corre avanti; sopra il bordo il giallo se ne va e resta la foto in blu di Prussia, una collina con un albero solo, il sole basso, un lago col riflesso spezzato e tre uccelli. Asciugando il blu si scurisce e il foglio si assesta con un piccolo colpo. Intanto la parola del passo in corso prende peso, si stringe e ha sotto una riga blu che cresce; alla fine le parole lasciano il posto al titolo «Twelve minutes of sun.», che entra leggero e prende peso. Col puntatore sopra la stampa asciutta il foglio si alza appena e l’ombra si allarga; un clic lo fa cedere un pixel.
Come funziona
La foto disegnata come luce
Lo script disegna il paesaggio in grigi su una tela a parte (cielo, sole, colline, albero, lago, riflesso) e ne legge i pixel: ogni grigio è quanta luce ha la scena. Da lì fa due strati: il negativo, scuro dove la foto è chiara, e la maschera della stampa, piena dove ci sono i sali fuori dal negativo e uguale a 1 meno la luce sotto il negativo. La maschera viene colorata due volte, in grigio azzurro (esposto e bagnato) e in blu di Prussia (risciacquato).
Un numero per tutta la corsa
Un ScrollTrigger senza timeline legge l’avanzamento, Lenis ammorbidisce lo scroll e una media esponenziale lo insegue (SMOOTH). Il numero si divide in quattro tratti: l’esposizione (da 0,03 a 0,46, power2.inOut), il negativo che si alza (fino a 0,6), il risciacquo (fino a 0,86) e l’asciugatura. A ogni fotogramma la tela si ridisegna: sotto il bordo del risciacquo i sali e il grigio azzurro con opacità pari all’esposizione, sopra il blu di Prussia.
Il bordo bagnato e l’ombra del vetro
Il bordo del risciacquo è una linea fatta di due seni che scorrono col tempo, ampia WAVE pixel a metà corsa e piatta all’inizio e alla fine; sopra ha un velo più scuro, il bagnato, che sparisce asciugando, e davanti qualche goccia. L’ombra del negativo è il suo rettangolo sfocato di 3 pixel, spostato dalla parte opposta al sole (SHADOW).
Le parole dei passi e il titolo
Il passo in corso va a peso 560 e larghezza 96 con Archivo, ha sotto una riga blu che cresce con scaleX e arriva con un piccolo elastico di due pixel; quelli fatti restano in nero. Alla fine il titolo in Newsreader passa da peso 260 a 470 e da ottica 72 a 30. Quando il risciacquo finisce il foglio riceve un colpo su una molla smorzata (SETTLE).
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MINUTES | script.js | 12 | Quanti minuti di sole conta il timer. |
DENSITY | script.js | 1 | Quanto viene scura la stampa: 0.6 è chiara, 1.2 profonda. |
WAVE | script.js | 4 | Quanto ondeggia il bordo bagnato del risciacquo, in pixel. |
SHADOW | script.js | 1 | Quanto scivola l’ombra del negativo col sole: 0 la tiene ferma. |
SETTLE | script.js | 26 | Quanto forte si assesta il foglio a risciacquo finito: 0 lo lascia fermo. |
SMOOTH | script.js | 6 | Quanto in fretta la stampa raggiunge lo scroll: meno è più morbido. |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
Quando usarla
Per la pagina di un fotografo, di una stamperia, di un laboratorio di camera oscura o di una mostra di fotografia: una foto che si svela mentre si scorre raccontando come è stata stampata, e finisce con un titolo sotto la stampa.
Sul telefono
La stessa animazione con le misure adattate: il foglio prende quasi tutta la larghezza e si misura anche sull’altezza, l’arco del sole gli sta sopra e le parole dei passi sotto. Tutto si ricalcola se la finestra cambia misura, anche a metà corsa.
Con il movimento ridotto
Niente si muove e lo scroll non è ammorbidito: la stampa è già risciacquata e asciutta, col sole a fine arco, il timer a 12:00 e il titolo sotto, e la pagina compare in dissolvenza.
Trappole
- Il negativo che si alza usciva dal foglio e veniva tagliato dal bordo della tela: la tela è più grande del foglio di un sesto per lato, così c’è posto anche per l’ombra.
- L’arco del sole era in un SVG stirato con vector-effect e il tratteggio si allungava: l’arco si disegna in pixel, col viewBox rifatto a ogni resize, e la parte percorsa usa la lunghezza vera del tracciato.
- La maschera della stampa si fa leggendo i pixel della scena: va rifatta al resize, insieme alla densità di pixel dello schermo, altrimenti la foto diventa sgranata.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 23 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.
