Persiane sulle immagini
Immagini, Scroll
NuovaGratis
Torna alla libreria
La galleria di quadri che si appende allo scroll
Scorri dentro l’anteprima
L’intestazione di una galleria d’arte inventata, nello stile ricco: scendendo, su una parete verde ancora vuota si appendono uno dopo l’altro cinque quadri, ognuno con la sua cornice e la sua tecnica. Il gancio d’ottone scorre sul binario, il quadro sale sui suoi due fili d’acciaio, dondola e si assesta, il cartellino gli scivola accanto e il faretto si accende con un tremolio. La scala segue il quadro che si sta appendendo; alla fine la sala abbassa le luci, la parete si allontana e arriva la sera dell’inaugurazione.
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 painting gallery hung on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up art gallery, Halle Nord. The stage sticks while you scroll: on an empty green wall the paintings are
hung one after the other from the brass picture rail, each lowered on its two steel wires, swinging and
settling; its label slides in and its spotlight clicks on. A step ladder follows the work being hung. At the
end the wall steps back and the opening night arrives. Everything is SVG drawn by the script -->
<main>
<section class="giro" data-giro>
<div class="palco" data-palco>
<svg class="scena" data-scena aria-hidden="true"></svg>
<header class="testata">
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true">
<rect class="marchio__cornice" x="5" y="7" width="22" height="18" rx="1.5"/>
<path class="marchio__filo" d="M16 2L7 8M16 2L25 8"/>
<circle class="marchio__sole" cx="20.5" cy="12.5" r="2.6"/>
<path class="marchio__colle" d="M7 23L13 15L18 20L21 17L25 23Z"/>
</svg>
<span data-brand>Halle Nord</span>
</p>
<p class="stato" data-stato><span class="stato__nome" data-stato-nome>An empty wall</span><span class="stato__nota" data-stato-nota>Winter show</span></p>
</header>
<div class="finale" data-finale>
<p class="finale__sopra" data-show>Winter show</p>
<h1 class="finale__titolo">Opening <em>Friday.</em></h1>
<p class="finale__testo">Five painters, one green wall. Doors open at seven, the bench is yours.</p>
<a class="tasto" href="#" data-tasto><span>Plan your visit</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to hang the show
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</div>
</section>
<section class="dopo">
<p class="dopo__marchio" data-brand2>Halle Nord</p>
<h2 class="dopo__titolo">A small gallery that rehangs its wall every season.</h2>
<p class="dopo__testo">Free entry, late opening on Fridays, coffee in the courtyard.</p>
</section>
</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.
30 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 quadri che si appende allo scroll» da Animorio e adattala al mio sitoCosa fa
Una sala di Halle Nord: la parete verde con l’intonaco a pennellate e l’ombra in basso, il battiscopa, il parquet di rovere a doghe, in alto il binario d’ottone con le staffe e, sopra, i faretti neri ancora spenti. Scendendo si appendono cinque quadri, uno alla volta: Paper Suns (carta ritagliata in cornice di rovere), Low Hills (olio su lino in cornice dorata con le perline), Three Circles (serigrafia col passe-partout e il riflesso del vetro), Blue Vase (olio su tavola in cornice nera) e North Sail (guazzo in cornice di noce). Per ognuno il gancio d’ottone scorre sul binario fino al suo posto, il quadro sale da sotto appeso ai suoi due fili d’acciaio, arriva con un piccolo rimbalzo e dondola sulla molla finché si assesta, con l’ombra sul muro che lo segue; poi il cartellino con il titolo e la tecnica scivola sotto, il faretto si gira, si accende con un tremolio e apre un cono di luce calda con la pozza sul muro e la polvere che ci fluttua dentro. Una scala con il barattolo di vernice arancione segue il quadro che si sta appendendo e se ne va alla fine. Allora la sala abbassa le luci e restano accesi solo i faretti, la parete si allontana con la panchina di pelle davanti, e arrivano Winter show, Opening Friday., la riga e il pulsante Plan your visit. Passando il dito o il mouse sui quadri appesi, dondolano. In alto a destra il nome del momento cambia con un salto. Risalendo si torna indietro fino alla parete vuota.
Come funziona
Un numero solo, a che punto siamo
Lo scroll muove con scrub un oggetto qualunque, da 0 a 1, e da quel numero vengono il gancio, la salita di ogni quadro, il cartellino, il faretto, il posto della scala e l’allontanarsi della parete alla fine. Così risalendo tutto torna indietro. Il tempo muove solo quello che vive da solo: il dondolio sulla molla, il tremolio dei faretti e la polvere nei coni.
Il quadro sulla molla
Ogni quadro ha un angolo e una velocità: quando arriva in cima riceve una spinta, poi a ogni fotogramma l’accelerazione è meno trenta volte l’angolo meno un poco la velocità, e il quadro dondola sempre meno finché si ferma. I due fili vanno dal gancio agli angoli e si ricalcolano a ogni passo, l’ombra segue con un ritardo.
Il faretto che si accende
Ogni faretto ha il suo punto dello scroll: quando lo si passa una piccola timeline fa tremolare la luce due volte prima di restare accesa; il cono è un tracciato con una sfumatura lineare dal bianco caldo al trasparente, la pozza sul muro un’ellisse sfocata.
Quanti quadri ci stanno
La parete conta i quadri sulla larghezza: cinque su un computer, quattro su uno schermo medio, tre su un telefono, scelti in modo che restino sempre Paper Suns, Low Hills e Blue Vase. Le cornici si misurano anche sull’altezza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'Halle Nord' | Il nome della galleria nella testata e in fondo alla pagina. |
SHOW | script.js | 'Winter show' | Il nome della mostra, in alto a destra e sopra il titolo finale. |
SCREENS | script.js | 6 | Quanto dura l’allestimento, in schermate di scroll. |
SWAY | script.js | 1 | Quanto dondolano i quadri arrivando e sotto il dito (0 = fermi). |
LIGHT | script.js | 1 | Quanto sono forti i coni dei faretti, da 0 a 1,6. |
DUST | script.js | 1 | Quanta polvere fluttua nella luce, da 0 a 2. |
Quando usarla
Per l’intestazione di una galleria d’arte, di un museo, di una fiera o di un artista che presenta una mostra; per il portfolio di un pittore o di un illustratore, per un negozio di cornici o di stampe d’arte; e per qualsiasi galleria di immagini che si vuole far arrivare una alla volta, finendo su un invito.
Sul telefono
La stessa animazione con le misure adattate: il disegno prende la forma della casella, sulla parete stanno tre quadri invece di cinque e le cornici si misurano anche sull’altezza; alla fine la parete si rimpicciolisce un poco meno e sotto il titolo resta solo il pulsante, senza la riga.
Con il movimento ridotto
Niente dondolio, niente tremolio dei faretti, niente polvere e niente scorrimento morbido: l’allestimento è diviso in momenti fermi (la parete vuota, i quadri appesi a gruppi, la sala con le luci basse e il titolo). Scorrendo, la scena sfuma e ricompare già al momento successivo.
Trappole
- Il dondolio non può venire dallo scroll: se l’angolo fosse calcolato dal numero, il quadro si fermerebbe appena si smette di scorrere. Lo scroll dà solo la spinta all’arrivo, la molla la fa vivere il tempo.
- Il dito sui quadri va riportato nelle coordinate della parete, che alla fine si rimpicciolisce e si sposta: si usa la trasformazione inversa, se no si spinge il quadro sbagliato.
- Tutto il disegno si rifà al resize, perché prende la forma della casella, e alla fine dei caratteri, perché i cartellini misurano il titolo per la loro larghezza.
- Le variabili dei colori non funzionano negli attributi fill dell’SVG: vanno scritte in style, così la Palette del Playground li ricolora.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 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.
