Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il soffietto dello zoom
Il cursore dello zoom di una fotocamera fatto come il soffietto delle vecchie macchine a lastre: trascinando la piastra con l’obiettivo le pieghe di pelle si aprono e si chiudono come pesi su molle, un’onda corre lungo il soffietto e torna, e ogni faccia prende la luce secondo quanto è inclinata.
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 bellows zoom</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>
<main class="stage">
<!-- the zoom of a camera, made like the bellows of an old field camera: the knob is the front plate with its lens,
and a pleated bellows runs from it to the back plate. The bellows is drawn by the script on the canvas -->
<div class="zoom" data-zoom>
<div class="zoom__head">
<span class="zoom__label" id="zoom-label">
<svg class="zoom__icon" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="M15.4 15.4L20 20M10.5 7.8v5.4M7.8 10.5h5.4"/>
</svg>
Zoom
</span>
<span class="zoom__value" aria-hidden="true"><span class="zoom__number" data-number>3.2</span><span class="zoom__times">×</span></span>
</div>
<div class="zoom__track" role="slider" tabindex="0" aria-labelledby="zoom-label" aria-orientation="horizontal" aria-valuemin="1" aria-valuemax="8" aria-valuenow="3.2" aria-valuetext="3.2 times" data-track data-autoclic>
<span class="zoom__rail" aria-hidden="true" data-rail></span>
<canvas class="zoom__bellows" aria-hidden="true" data-bellows></canvas>
<span class="zoom__rear" aria-hidden="true"></span>
<span class="zoom__knob" aria-hidden="true" data-knob>
<span class="zoom__plate"></span>
<span class="zoom__lens"></span>
</span>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.
27 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 «Il soffietto dello zoom» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la scritta Zoom con una piccola lente, e a destra il valore, 3.2×. Sotto, un binario chiaro con una tacca per ogni ingrandimento intero; sul binario due piastre di metallo scuro, quella di sinistra ferma e quella di destra con l’obiettivo, e fra le due un soffietto di pelle rosso scuro a pieghe, come quello delle vecchie macchine fotografiche. Aprendo la pagina il soffietto chiuso si apre fino allo zoom. Trascinando la piastra con l’obiettivo il soffietto si allunga o si chiude: tirando in fretta si aprono per prime le pieghe vicine alla mano, spingendo si ammucchiano contro la piastra, e l’onda corre fino alla piastra di fondo e torna indietro una o due volte prima di fermarsi; dove le pieghe sono strette sporgono di più sopra e sotto. Ogni faccia prende la luce secondo la sua inclinazione: le pieghe chiuse fanno righe nette di luce e d’ombra, quelle tirate diventano più piane e uniformi. Il numero si allarga con lo zoom, sull’asse della larghezza del carattere. Premendo sul binario la piastra ci corre e poi segue la mano; oltre le due estremità cede un poco, come un elastico, e lasciata torna al suo posto. Le frecce, Pagina su e giù, Inizio e Fine la muovono anche da tastiera.
Come funziona
Le pieghe sono pesi su molle
Il soffietto è una fila di facce, PLEATS per due: la prima piega sta sulla piastra di fondo, l’ultima sulla manopola, e ognuna in mezzo è un piccolo peso legato alle vicine da una molla, con la rigidità e l’attrito dell’aria di BELLOWS. La molla tira verso il punto a metà fra le due vicine, così a riposo le pieghe sono equidistanti a qualunque lunghezza; un secondo freno, fra vicine, spegne per prime le increspature più fini. Il conto si fa sul ticker di GSAP a passi di 1/300 di secondo, col fotogramma limitato a 1/30.
Le pieghe non si attraversano
Due pieghe più vicine di 1,7 pixel si respingono con una molla dura, e una faccia tirata troppo viene richiamata. Dopo ogni passo un giro in avanti e uno all’indietro rimettono ogni piega ad almeno un soffio dalla vicina, così anche il soffietto schiacciato in fretta resta in ordine.
La luce dall’inclinazione
Fra due pieghe c’è una faccia: la sua larghezza e la profondità della piega danno la sua inclinazione, e da questa la direzione in cui guarda. La luce viene da sinistra e dal davanti: quanto la faccia le si volta, più un riflesso stretto, sceglie uno dei 131 colori calcolati una volta sola fra i quattro del CSS. Sotto le facce c’è la sagoma intera nel colore più scuro, che fa da piega nelle giunture; sopra, le righe chiare degli spigoli, una sfumatura in source-atop che arrotonda il tubo e una in destination-over che gli mette l’ombra sotto.
Il profilo che si gonfia
Le pieghe esterne sporgono sopra e sotto di 4 pixel: di più dove sono più vicine della media, di meno dove sono più lontane, quanto dice SWELL. Così l’onda si vede anche nel profilo del soffietto, che si gonfia dove passa. Il numero dello zoom segue la manopola sull’asse della larghezza di Instrument Sans, da 75 a 100.
La mano, i tasti e l’anteprima
Presa, la manopola va dove va la mano, divisa fra i piccoli passi; premuta sul binario ci corre su una molla rigida e poi la segue; oltre le estremità cede al massimo di RUBBER pixel. Lasciata, o mossa coi tasti, la porta la molla CARRY fino al valore, e in fondo batte contro il fermo e torna indietro di poco. Il ruolo slider sta su tutto il binario, con aria-valuenow e aria-valuetext; un clic da script (detail 0, quello dell’anteprima della libreria) fa da mano finta e porta la manopola lontano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START_AT | script.js | 3.2 | Lo zoom all’apertura della pagina. |
RANGE | script.js | [1, 8] | Lo zoom più basso e quello più alto. |
STEP | script.js | 0.1 | Di quanto si muove lo zoom alla volta. |
KEYS | script.js | [0.1, 1] | Di quanto sposta lo zoom una freccia, e con Maiuscolo o coi tasti Pagina. |
PLEATS | script.js | 18 | Le pieghe del soffietto, due facce ciascuna. |
BELLOWS | script.js | [12000, 5] | Le molle del soffietto: quanto sono rigide (più lo sono, più l’onda corre veloce) e quanto le frena l’aria. |
CARRY | script.js | [380, 0.72] | La molla che porta la manopola quando la mano non la tiene: quanto è rigida e quanto è frenata. |
SWELL | script.js | 0.8 | Quanto sporge una piega schiacciata sopra e sotto, e quanto rientra una tirata. |
RUBBER | script.js | 14 | Quanto cede la manopola tirata oltre le due estremità, in pixel. |
Quando usarla
Per lo zoom di una fotocamera, di un editor di foto o di una mappa; per la focale, una distanza, la lunghezza di qualcosa che si allunga davvero. Sta bene dove la fotografia e gli strumenti d’una volta c’entrano: negozi di macchine fotografiche, laboratori di sviluppo, portfolio di fotografi, app per la pellicola.
Sul telefono
Il cursore prende la larghezza dello schermo meno i margini (358 pixel a 390) e resta alto 60 pixel; le pieghe sono le stesse, più fitte. Col dito si trascina di lato mentre la pagina scorre ancora in su e in giù (touch-action: pan-y), e un tocco sul binario porta lì la manopola.
Con il movimento ridotto
Niente onde, niente elastico e niente apertura all’arrivo: le pieghe sono sempre equidistanti, la manopola segue il dito, salta dove si preme e va dritta al valore scelto coi tasti. Restano la luce delle facce, che cambia con lo zoom, e il numero che si allarga.
Trappole
- Con poco attrito dell’aria il moto più lento, tutto il soffietto che va avanti e indietro circa una volta al secondo, durava cinque secondi dopo ogni gesto, e la tela si ridisegnava per tutto quel tempo. Con molle più rigide e più attrito l’onda fa due giri e si ferma; sotto un decimo di pixel, che non si vede nemmeno sugli schermi densi, le pieghe tornano al loro posto e il ticker si spegne.
- Con poche pieghe e le facce illuminate fino al rosa, il soffietto tirato sembrava un bastoncino di zucchero a righe e non pelle: più pieghe, una scala di colori più scura, un riflesso stretto e le righe sugli spigoli lo fanno tornare un soffietto.
- Coi tasti Inizio e Fine la molla della manopola, che rimbalza appena, la portava oltre l’estremità e schiacciava il soffietto chiuso: ora, lasciata, la manopola non passa le estremità, batte contro il fermo e torna indietro di poco.
- Il clic dell’anteprima andava a un valore fisso, che a volte era a pochi decimi da quello di prima e non mostrava niente: ora sceglie sempre uno zoom lontano almeno un terzo del binario.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
