Scroll animation: la pagina che scorre come l'iPhone

Cos'è una scroll animation (e due demo da provare adesso)

La scroll animation «alla Apple», cioè l'animazione che segue lo scroll delle pagine prodotto di AirPods e iPhone, si rifà con una sequenza di immagini (i fotogrammi) che la pagina disegna una dopo l'altra in un riquadro, il canvas, in base a quanto hai scorso. Ti servono un video o un render del prodotto (un'immagine 3D fatta al computer), ffmpeg (un programma gratuito) per ricavarne i fotogrammi WebP e poche righe di JavaScript. Conviene se hai un oggetto da mostrare; non conviene se la pagina deve solo farti chiamare.

Prima di leggere oltre, prendi il telefono e apri queste due pagine. Scorri piano, poi torna su.

• Smalto: una brocca di ceramica gira su se stessa e cambia smalto mentre scorri.
• Tono: un piccolo diffusore si scompone in sei strati (copertura, griglia, altoparlante, scheda, batteria, base) e si ricompone.

Sono due demo di DG Designed, con marchi e prodotti inventati: gli oggetti sono render fatti in Blender, prezzi e moduli che vedi dentro non sono veri. Servono a farti toccare con mano il risultato di questa guida, su una pagina online e non in un video.

Perché questa pagina ti resta in testa? Perché il prodotto lo «giri» tu, con il dito, come quando in negozio prendi in mano una brocca e la rigiri per guardare il piede. Non è un video che parte da solo: si muove solo se scorri, si ferma se ti fermi, torna indietro se torni su.

Come funziona: un cartone animato sfogliato con lo scroll

Ricordi i blocchetti di fogli con un disegno su ogni pagina? Li sfogli veloce con il pollice e il disegno si muove. Qui è uguale: i fogli sono foto numerate del prodotto (f0001.webp, f0002.webp e così via), il pollice è lo scroll.

I pezzi sono tre:

1. I fotogrammi: da 100 a 200 foto del prodotto, ognuna un poco più girata della precedente, in formato WebP. Il WebP è leggero: secondo Google pesa dal 25 al 34% in meno di un JPEG di qualità equivalente, e può avere lo sfondo trasparente. Lo legge circa il 97% dei browser in uso (Can I use, dato di settembre 2026).
2. Il canvas: un elemento della pagina fatto apposta per disegnare grafica e animazioni (MDN, verificato a ottobre 2026). La pagina ci disegna sopra il fotogramma giusto con drawImage().
3. Un pezzetto di JavaScript che guarda a che punto della sezione sei arrivato e sceglie quale foglio mostrare: in cima il primo, in fondo l'ultimo.

Le pagine prodotto di Apple fanno questo effetto da anni. Secondo l'analisi di setproduct (settembre 2022), dietro c'è una sequenza di immagini disegnate su canvas al ritmo dello scroll; il tutorial di CSS-Tricks (maggio 2020) rifà con questo metodo la pagina degli AirPods Pro, con 148 immagini. È il metodo dei tutorial più citati per rifare quell'effetto, anche se nessuno dei due può dire con certezza cosa usi Apple oggi.

Non è il parallasse. Il parallasse muove livelli diversi (sfondo, testo, foto) a velocità diverse, ma le immagini restano le stesse. Qui cambia proprio l'immagine. E non sono nemmeno le animazioni «che compaiono», dove un titolo o un riquadro entra dal lato: quelle muovono testi, non un oggetto in tre dimensioni.

Perché JavaScript e non solo CSS? Esistono animazioni CSS legate allo scroll (animation-timeline), ma a ottobre 2026 non funzionano ancora in tutti i browser principali (MDN, verificato a ottobre 2026). Con qualche riga di JavaScript l'effetto va ovunque.

Quando serve a un piccolo sito e quando no

La regola è una: l'effetto è la vetrina, non il negozio. Ferma lo sguardo su un oggetto; non vende da solo. Sotto deve esserci sempre il pulsante per comprare, prenotare o scrivere, e una pagina costruita per portare lì. Se non l'hai ancora, parti dalla struttura di una landing page che converte.

Se il sito intero è ancora da fare, la scroll animation viene dopo: testi, pagine e farsi trovare su Google li costruisci con la guida al sito web con l'IA.

Fotogrammi o video? Le nostre misure

La domanda che si fanno tutti: perché tante immagini e non un video, fatto avanzare e tornare indietro con lo scroll? Abbiamo provato le due strade sulla stessa pagina. Le misure qui sotto le abbiamo fatte noi il 25/10/2026 sulla demo Tono: 192 fotogrammi renderizzati in Blender, Chrome senza finestra su un PC con scheda grafica NVIDIA RTX 4070, limite 60 fotogrammi al secondo, 4G simulato a 4 Mbit/s con 40 ms di latenza. Una sola pagina su un solo computer: servono a capire gli ordini di grandezza, non sono una promessa per ogni sito.

Come le leggiamo, in tre frasi. Sul computer le due strade sono fluide allo stesso modo. I fotogrammi sono più nitidi e si fermano sul fotogramma esatto, avanti e indietro. Sul telefono il video pesa meno della metà; con il 4G, però, la sequenza comincia a muoversi già dopo circa 25 file, prima di essere arrivata tutta.

Per questo il metodo di questa guida usa i fotogrammi per la pagina vera e tiene il video per le prove veloci. Due accortezze fanno la differenza, e le vedrai nel kit: i fotogrammi arrivano in un ordine furbo (il primo, l'ultimo, uno ogni otto, poi tutti gli altri) e se ne «aprono» in memoria pochi alla volta. Un fotogramma 1920x1080 aperto occupa 1920 × 1080 × 4 byte, circa 8,3 MB: 192 fotogrammi aperti tutti insieme farebbero circa 1,6 GB, troppo per un telefono.

Per avere la scala del peso: secondo il Web Almanac di HTTP Archive la home page mediana pesa 2,56 MB su telefono (dato di luglio 2025). La nostra sequenza per telefono, da sola, ne pesa 2,43. Si usa una volta per pagina, sul prodotto che conta. E se il resto del sito è già lento, prima sistemi quello: ecco gli errori che affossano un sito.

Passo 1: ricava i fotogrammi da un video con ffmpeg

Cosa ti serve. Un video del prodotto con un movimento solo, senza tagli: per esempio la brocca su un piatto girevole, il telefono fermo su un sostegno, la luce che non cambia, sfondo pulito. Giralo in orizzontale. Poi ffmpeg, un programma gratuito che lavora sui video da terminale.

• Windows: apri PowerShell (Start, scrivi «PowerShell») e scrivi winget install Gyan.FFmpeg. Poi chiudi e riapri PowerShell.
• Mac: con Homebrew installato, scrivi brew install ffmpeg nel Terminale.
• Controlla che funzioni con ffmpeg -version: deve rispondere con una riga che comincia per «ffmpeg version».

Metti il video (diciamo prodotto.mp4) in una cartella, apri il terminale lì dentro (su Windows: clic nella barra dell'indirizzo della cartella, scrivi powershell, Invio), crea le cartelle e lancia il comando:

mkdir fotogrammi
ffmpeg -i prodotto.mp4 -vf "fps=12,scale=1920:-2" -c:v libwebp -quality 80 -compression_level 4 -f image2 fotogrammi/f%04d.webp

Pezzo per pezzo:

• -i prodotto.mp4: il video di partenza.
• fps=12: quanti fotogrammi tenere per ogni secondo di video. Il numero di fotogrammi finale è secondi × fps: un video di 10 secondi a 12 dà 120 fotogrammi. Vuoi 96 fotogrammi da 8 secondi? 96 diviso 8 fa 12.
• scale=1920:-2: larghezza 1920 pixel, altezza calcolata da sola. Se il video è più piccolo di Full HD, metti la sua larghezza: ingrandire non aggiunge dettagli.
• -c:v libwebp -quality 80 -compression_level 4: salva in WebP, qualità 80 su 100 (la scala va da 0 a 100, di base 75) e compressione 4 su 6, come da documentazione di ffmpeg.
• -f image2 fotogrammi/f%04d.webp: una foto per fotogramma, numerate con quattro cifre a partire da 1: f0001.webp, f0002.webp e così via (schema dei nomi di ffmpeg).

Per il telefono conviene una seconda serie, verticale e più leggera, ritagliata dal centro del video:

mkdir fotogrammi-telefono
ffmpeg -i prodotto.mp4 -vf "fps=12,crop=ih*9/16:ih,scale=720:-2" -c:v libwebp -quality 80 -compression_level 4 -f image2 fotogrammi-telefono/f%04d.webp

crop=ih*9/16:ih taglia un rettangolo verticale 9:16 al centro dell'immagine; funziona bene se il prodotto sta al centro dell'inquadratura. Abbiamo provato tutti e due i comandi con ffmpeg 8.1 su un video di 10 secondi: 120 fotogrammi per serie, numerati da f0001 a f0120.

Quanti fotogrammi? Tra 100 e 200 vanno bene: più sono, più il movimento è fine, ma più pesa la pagina. Le nostre demo ne usano 192, l'esempio del kit 96. Il tetto che ci diamo è 16 MB per serie; se lo superi, abbassa la qualità a 70, la larghezza a 1600 o il numero di fotogrammi. Il peso lo vedi con tasto destro sulla cartella, Proprietà.

Se non ti va di decifrare i comandi, fatteli scrivere su misura. Questo prompt l'abbiamo provato con un caso vero (una ceramista di Caltagirone con un video di 10 secondi su Windows 11): la risposta ha dato installazione, taglio del video, calcolo degli fps e controllo del peso, con comandi giusti.

Passo 2: la pagina minima che li disegna mentre scorri

Adesso la pagina. L'idea: una sezione alta quattro schermate; dentro, un riquadro che resta fermo sullo schermo mentre scorri (position: sticky); nel riquadro, il primo fotogramma come immagine normale e sopra il canvas. Il JavaScript calcola a che punto della sezione sei e disegna il fotogramma corrispondente.

Tre attenzioni sono già dentro il codice:

• Il poster si vede subito. Il primo fotogramma è un <img> con un testo alternativo che descrive il prodotto e la priorità alta. Mai loading="lazy" sull'immagine principale: web.dev lo dice chiaro. Il canvas è nascosto ai lettori di schermo, perché quello che c'è disegnato dentro non lo «vedono» (MDN): la descrizione è nell'immagine.
• La memoria non esplode. I fotogrammi arrivano e restano compressi; si «apre» solo quello da disegnare, con createImageBitmap() (funziona in tutti i browser principali da settembre 2021), e si richiude subito. Se un fotogramma non è ancora arrivato, si mostra il più vicino prima.
• Chi ha chiesto meno movimento non lo subisce. Con «riduci movimento» attivo nel telefono o nel computer (prefers-reduced-motion) la pagina non scarica niente e resta la foto ferma.

Metti questo file come index.html accanto alla cartella fotogrammi, e cambia NUMERO, il testo alternativo e il link del pulsante:

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La brocca che gira</title>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #efe9df; }
  .scena { height: 400vh; }                              /* 4 schermate di scroll */
  .palco { position: sticky; top: 0; height: 100vh; }    /* resta ferma mentre scorri */
  .palco img, .palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .dopo { padding: 15vh 8vw; font-size: 1.3rem; }
</style>
</head>
<body>
<section class="scena">
  <div class="palco">
    <img src="fotogrammi/f0001.webp" alt="Brocca in ceramica smaltata a mano" fetchpriority="high">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
<section class="dopo">
  <h2>Brocca da un litro, tre smalti</h2>
  <p><a href="https://wa.me/39[IL TUO NUMERO]">Scrivici su WhatsApp</a></p>
</section>
<script>
const NUMERO = 96;                                       // quanti fotogrammi ci sono
const nome = i => 'fotogrammi/f' + String(i + 1).padStart(4, '0') + '.webp';
const scena = document.querySelector('.scena');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const file = [];                                         // i fotogrammi scaricati, ancora compressi
let mostrato = -1, occupato = false;

// a che fotogramma siamo: 0 in cima alla scena, NUMERO-1 in fondo
function indice() {
  const corsa = scena.offsetHeight - innerHeight;
  const fatto = Math.min(1, Math.max(0, -scena.getBoundingClientRect().top / corsa));
  return Math.round(fatto * (NUMERO - 1));
}

async function aggiorna() {
  if (occupato) return;
  let i = indice();
  while (i > 0 && !file[i]) i--;                         // non è ancora arrivato? usa il più vicino prima
  if (!file[i] || i === mostrato) return;
  occupato = true;
  try {
    const img = await createImageBitmap(file[i]);        // decodifica solo questo fotogramma
    const w = canvas.clientWidth * devicePixelRatio, h = canvas.clientHeight * devicePixelRatio;
    if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; }
    const s = Math.max(w / img.width, h / img.height);   // riempie il riquadro come object-fit: cover
    ctx.drawImage(img, (w - img.width * s) / 2, (h - img.height * s) / 2, img.width * s, img.height * s);
    img.close();                                         // libera la memoria
    mostrato = i;
  } catch { file[i] = null; }                            // file rovinato: lo salta
  occupato = false;
  if (indice() !== i) aggiorna();                        // nel frattempo hai scorso ancora
}

// con "movimento ridotto" attivo non si scarica niente: resta la foto ferma
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
  for (let i = 0; i < NUMERO; i++) {
    fetch(nome(i)).then(r => r.ok ? r.blob() : null).then(b => { if (b) { file[i] = b; aggiorna(); } });
  }
  addEventListener('scroll', () => requestAnimationFrame(aggiorna), { passive: true });
  addEventListener('resize', () => { mostrato = -1; aggiorna(); });
}
</script>
</body>
</html>

Come provarla. Non aprirla con doppio clic: i browser bloccano lo scaricamento dei fotogrammi da una pagina aperta dal disco. Serve un piccolo server sul tuo computer. Se hai Node.js, nella cartella scrivi npx serve; se hai Python, python -m http.server 8000; poi apri l'indirizzo che ti indica (per Python http://localhost:8000). Il kit ne ha uno già pronto. Scorri giù e su: la brocca deve girare avanti e indietro.

Questo codice l'abbiamo provato davvero il 30/10/2026 con i 96 fotogrammi d'esempio del kit, in Chrome: scorrendo giù e su il fotogramma segue lo scroll, avanti e indietro; con un telefono simulato (390x844) gira uguale; con «riduci movimento» attivo non scarica niente e resta il poster; togliendo apposta un fotogramma, la pagina mostra quello prima e non si blocca.

Il limite onesto. Questa pagina va bene per capire e per una prova. Per una pagina vera mancano l'ordine furbo di arrivo dei fotogrammi, la serie per il telefono, più tratti avanti e indietro, la trasparenza, i testi agganciati all'oggetto e il controllo della fluidità. È quello che fa il kit.

Anche questa pagina te la puoi far scrivere. Il prompt qui sotto l'abbiamo provato con il caso della ceramista: la pagina uscita, messa nel browser con i fotogrammi del kit, girava avanti e indietro, sul computer e sul telefono simulato.

Una volta online, misura la pagina con PageSpeed Insights di Google, dal telefono. Il voto sull'immagine principale (LCP, «buono» entro 2,5 secondi secondo web.dev) lo fa il poster, non il canvas: il canvas non rientra tra gli elementi che quella misura considera. Per questo il poster deve arrivare subito.

Domande frequenti sulla scroll animation

Come si fa la scroll animation come sul sito Apple?

Si prepara una sequenza di immagini del prodotto (fotogrammi WebP numerati, ricavati da un video o da un render 3D) e una pagina che, mentre scorri, disegna su un canvas il fotogramma giusto in base a quanto hai scorso. Servono un video del prodotto, ffmpeg (gratis) per ricavare i fotogrammi e poche righe di JavaScript. È il metodo che seguono i tutorial più noti per rifare l'effetto delle pagine prodotto di AirPods e iPhone.

Meglio un video o una sequenza di immagini per l'animazione allo scroll?

Nelle nostre misure del 25/10/2026 su una sola pagina, sul computer le due strade sono fluide allo stesso modo, ma la sequenza di immagini è più nitida e si ferma sul fotogramma esatto, anche all'indietro. Il video pesa meno sul telefono. Per una pagina vera usiamo i fotogrammi; il video lo teniamo per le prove veloci e per le sequenze molto lunghe.

La scroll animation funziona sul telefono?

Sì, se la prepari per il telefono: una serie di fotogrammi verticale e più leggera, altezze pensate per gli schermi piccoli e la decodifica di pochi fotogrammi alla volta, così la memoria non si riempie. Va sempre provata su un telefono vero, con la rete del telefono, non solo sul computer.

Che differenza c'è tra scroll animation ed effetto parallasse?

Il parallasse muove livelli diversi della pagina (sfondo, testo, foto) a velocità diverse mentre scorri, ma le immagini restano le stesse. La scroll animation a fotogrammi cambia proprio l'immagine: il prodotto gira o si apre un fotogramma alla volta, come un cartone animato sfogliato con il dito.

Si può fare una scroll animation con l'IA?

Sì: un assistente come ChatGPT o Claude può scriverti i comandi ffmpeg per ricavare i fotogrammi e la pagina HTML che li disegna, se gli dai un prompt preciso con il tuo caso. Le risposte vanno provate nel browser prima di metterle online: in questa guida ci sono i prompt che abbiamo provato e quello che ne è uscito.

Un'animazione allo scroll rallenta il sito?

Può, perché una sequenza di fotogrammi pesa qualche megabyte: la nostra versione per telefono pesa 2,43 MB, quasi quanto la home page mediana su telefono (2,56 MB secondo il Web Almanac 2025 di HTTP Archive). Non rallenta l'apertura se il primo fotogramma si vede subito come immagine normale e gli altri si scaricano dopo, quando la sezione è vicina. Una sequenza per pagina, non dappertutto.

L'assaggio del kit: la struttura di una sezione a fotogrammi

Con i due passi fatti a mano hai una pagina che gira. Il kit della guida contiene lo stesso modulo che fa girare le demo Smalto e Tono, ripulito perché lo possa usare chiunque: il modulo fotogrammi.js, una pagina d'esempio già pronta con la brocca, un modello da compilare con i tuoi testi, gli strumenti per passare dal video ai fotogrammi e per vedere la pagina sul tuo computer.

Ecco un pezzo vero del kit: la struttura HTML di una sezione a fotogrammi, quella che sta commentata in testa a js/fotogrammi.js. Da sola non si muove (servono fotogrammi.js e motore.js, che sono nel kit), ma ti fa vedere quanto poco devi scrivere: una cartella, un numero, i tuoi testi.

Cosa fa il kit in più rispetto alla pagina minima: scarica prima i fotogrammi che servono, apre in memoria solo quelli vicini e non blocca mai lo scroll; ha già pronti il giro iniziale che parte da solo, più tratti avanti e indietro sulla stessa sequenza, più palchi che condividono le stesse immagini, la serie verticale per il telefono, le etichette agganciate a un punto dell'oggetto e il rispetto del movimento ridotto. Con prepara_fotogrammi.mjs passi dal video del tuo prodotto alla cartella dei fotogrammi in un comando. Il riquadro qui sotto elenca tutto il contenuto, cosa serve e quanto pesa.

Da fare oggi: apri la demo Smalto dal telefono, poi gira dieci secondi di video di un tuo prodotto su un piatto che ruota e prova il comando del passo 1. Così vedi subito se la tua merce «rende» girando. Se ti blocchi su un comando o sul codice, scrivi a Fabio: raccontagli a che punto sei e cosa vedi sullo schermo.