Come creare una pagina prodotto animata dallo scroll (scroll video)

Una pagina prodotto guidata dallo scorrimento è un sito di una sola pagina in cui il video o l’animazione del prodotto va avanti quando il visitatore scorre verso il basso e torna indietro quando scorre verso l’alto. Il metodo più diffuso divide il video in singoli fotogrammi e disegna quello giusto su un elemento canvas in base alla posizione di scorrimento.

Questo articolo spiega da dove nasce la tecnica, tre modi per realizzarla, le regole per prestazioni e accessibilità, gli errori più comuni e come Yeşilçam Studios costruisce questo tipo di pagina a partire da un video di montaggio.

Che cos’è una pagina prodotto guidata dallo scorrimento?

In una pagina prodotto classica il video parte con un pulsante di riproduzione e procede al suo ritmo. In una pagina guidata dallo scorrimento è il visitatore a controllare il tempo: la barra di scorrimento è legata alla timeline del video. Quando il visitatore si ferma, l’immagine si ferma; quando torna indietro, il prodotto si riavvolge. Questa sensazione di controllo lo invita a studiare i pezzi, gli strati o la rotazione del prodotto.

La tecnica si è diffusa alla fine degli anni 2010 grazie alle pagine di lancio dei grandi marchi tecnologici. Le pagine in cui gli auricolari si scomponevano o un telefono ruotava mentre si scorreva sono diventate presto un linguaggio riconoscibile del marketing di prodotto. Oggi lo stesso approccio si usa anche nelle landing page dei piccoli marchi.

Quali metodi si possono usare per un’animazione guidata dallo scorrimento?

Metodo	Come funziona	Punto di forza	Punto debole
Sequenza di immagini e canvas	Il video viene diviso in fotogrammi; il fotogramma corrispondente viene disegnato su un canvas in base all’avanzamento dello scorrimento	Preciso al fotogramma e coerente in tutti i browser	Molti file da scaricare
Ricerca nel video	La posizione di riproduzione di un unico file video segue lo scorrimento	Un solo file, dimensioni ridotte	Scatta quando si torna indietro; non è fluido se non è codificato con fotogrammi chiave frequenti
Timeline di scorrimento CSS	Le animazioni CSS sono legate direttamente alla posizione di scorrimento	Nessun JavaScript necessario, fluido	Anima proprietà CSS, non fotogrammi video; il supporto dei browser è disomogeneo

Per riprodurre un video di prodotto, la sequenza di immagini è l’opzione più solida. Le timeline di scorrimento CSS sono adatte ai movimenti di contorno come titoli, testi e transizioni delle schede; nei browser che non le supportano la pagina deve continuare a funzionare in forma semplice.

Quali sono i componenti di una pagina guidata dallo scorrimento?

Palco fisso

L’area in cui si svolge l’animazione resta ferma sullo schermo mentre il visitatore scorre una sezione lunga. L’altezza di quella sezione determina la «durata» dell’animazione: una sezione più alta significa una riproduzione più lenta.

Sequenza di fotogrammi

Il video viene diviso in immagini compresse a una risoluzione adatta allo schermo. Formati moderni come WebP riducono sensibilmente il peso dei file. Servire una sequenza più piccola ai dispositivi mobili alleggerisce ulteriormente il carico.

Livello di testo

Titolo, caratteristiche, storia e sezioni di contatto sono scritti come vero testo HTML. In questo modo i motori di ricerca leggono il contenuto, gli screen reader lo annunciano e i visitatori possono selezionarlo.

Visualizzazione di riserva

Prima che la sequenza di fotogrammi sia caricata, il primo fotogramma viene mostrato come immagine poster, così il visitatore non vede mai un’area vuota.

Come si crea passo dopo passo una pagina prodotto guidata dallo scorrimento?

1. Prepari l’animazione di partenza. Scelga un video da 5 a 20 secondi con una storia chiara, come un montaggio, una rotazione del prodotto o un movimento di apertura.
2. Divida il video in fotogrammi. Nella maggior parte dei casi bastano da 24 a 30 fotogrammi al secondo; video molto lunghi gonfiano il numero di file senza alcun vantaggio.
3. Comprima i fotogrammi e li prepari in due dimensioni (desktop e mobile).
4. Costruisca lo scheletro della pagina: un canvas fisso, una lunga sezione di scorrimento attorno e le sezioni di testo.
5. Converta l’avanzamento dello scorrimento in un numero di fotogramma e disegni dentro requestAnimationFrame; non disegni direttamente a ogni evento di scorrimento.
6. Precarichi i fotogrammi in ordine: prima quello di apertura e alcuni intermedi, poi il resto. Quando il visitatore raggiunge un fotogramma non ancora caricato, mostri quello caricato più vicino.
7. Rispetti la preferenza di movimento ridotto, faccia test su mobile e misuri la velocità della pagina.

Quanti fotogrammi servono e quanto peserà la pagina?

Un semplice calcolo facilita la pianificazione. Un video di 10 secondi a 24 fotogrammi al secondo equivale a 240 fotogrammi. Se ogni fotogramma compresso pesa in media 60 KB, si scaricano in totale circa 14 MB; senza compressione gli stessi fotogrammi peserebbero molte volte di più. Ci sono tre modi per ridurre il peso:

• Meno fotogrammi: in un’animazione riprodotta con lo scorrimento, 12-15 fotogrammi al secondo sembrano spesso fluidi, perché è il visitatore a stabilire la velocità.
• Risoluzione adatta allo schermo: non invii mai fotogrammi in formato desktop a un dispositivo mobile.
• Caricamento progressivo: scarichi prima fotogrammi molto distanziati, poi quelli intermedi; l’animazione funziona presto in forma approssimativa e diventa più fluida man mano che il caricamento prosegue.

Anche l’altezza della sezione di scorrimento plasma l’esperienza. Come regola pratica, prevedere da una a due altezze di schermo di scorrimento per ogni secondo di animazione dà un ritmo con cui i visitatori seguono il movimento comodamente.

A che cosa fare attenzione per prestazioni e accessibilità?

Il rischio maggiore di una pagina guidata dallo scorrimento è il peso. Se si scaricano centinaia di fotogrammi ad alta risoluzione, la pagina si apre lentamente e consuma i dati mobili. Mantenga i fotogrammi alla risoluzione che lo schermo può davvero mostrare, carichi in fretta il primo fotogramma e porti il resto gradualmente.

Per l’accessibilità, la regola di base è rispettare l’impostazione di riduzione del movimento del sistema operativo. La query prefers-reduced-motion in CSS comunica questa preferenza; quando è attiva, mostri un fotogramma fisso o una breve serie di immagini al posto dell’animazione. Per le persone sensibili al movimento, movimenti su larga scala possono provocare vertigini.

• Non dirotti lo scorrimento: il codice che cambia la velocità di scorrimento o che fa scattare la pagina a forza tra le sezioni stanca gli utenti.
• Non metta informazioni solo dentro l’animazione; ogni messaggio importante deve esistere anche come testo.
• Garantisca la navigazione da tastiera, un focus visibile e un contrasto del testo sufficiente.
• Dia al canvas una descrizione significativa o lo contrassegni come decorativo.

Quali sono gli errori più comuni?

• Riprodurre il video con la ricerca diretta e ottenere un’immagine che scatta quando si torna indietro.
• Lasciare i fotogrammi a piena risoluzione e appesantire la pagina di megabyte.
• Rendere la sezione di scorrimento troppo corta: l’animazione passa in un lampo e il visitatore non vede nulla.
• Incorporare il testo nelle immagini: motori di ricerca e screen reader non possono leggerlo.
• Non fare test su mobile: su uno schermo verticale il prodotto può uscire dall’inquadratura.

Quando una pagina guidata dallo scorrimento è la scelta sbagliata?

Non tutti i prodotti traggono vantaggio da una pagina guidata dallo scorrimento. Una pagina prodotto classica può funzionare meglio in questi casi:

• Quando i visitatori vogliono arrivare in fretta a prezzo e disponibilità, per esempio in un catalogo con molti prodotti.
• Quando il prodotto non ha una storia visiva; per prodotti semplici in un solo pezzo, un’animazione allo scorrimento aggiunge solo attesa.
• Quando gran parte del pubblico arriva con connessioni lente.

Come si misura se una pagina guidata dallo scorrimento funziona?

Fare colpo non è di per sé un successo. Monitorare questi indicatori dopo la pubblicazione mostra se la pagina funziona davvero:

• Profondità di scorrimento: quale quota di visitatori arriva alla fine dell’animazione.
• Clic sull’invito all’azione: la quota di chi clicca sul pulsante che segue l’animazione.
• Tempo di caricamento del primo contenuto visibile: quanto velocemente compare il fotogramma poster.
• Mobile e desktop a confronto: la stessa pagina può comportarsi diversamente nei due gruppi di dispositivi.

Come si crea una pagina prodotto guidata dallo scorrimento in Yeşilçam Studios?

Website Studio trasforma un video Montaggio / Smontaggio realizzato in Film Studio in un sito prodotto di una sola pagina che si riproduce fotogramma per fotogramma mentre il visitatore scorre. Dopo aver realizzato il video con un’animazione di montaggio / smontaggio, prema «Crea un sito web da questo video» sul video finito.

1. Scelga il video di partenza. Se vuole, aggiunga un altro video Montaggio o un’immagine come seconda scena.
2. Scriva il nome del marchio, il nome del prodotto, il titolo principale e i testi; ogni campo è facoltativo, e Sam compila quelli lasciati vuoti con testi d’esempio adatti al Suo prodotto.
3. Se lo desidera, inserisca l’indirizzo del Suo sito web; la home page e una pagina interna vengono lette per ricavare nome del marchio, colori, logo e testi.
4. Scelga le sezioni del menu (Caratteristiche, Storia, Galleria, FAQ, Contatti), il colore del tema, la lingua del sito e lo sfondo. Se sceglie Paesaggio a inchiostro come sfondo, resta fermo sui dispositivi con il movimento ridotto attivo.
5. Per la galleria usi solo i fotogrammi del video (gratis) oppure generi fino a 8 immagini.
6. Prema «Crea il sito con Sam».

Quando il sito è pronto può impostarne la visibilità su «Solo lei» o «Pubblico», condividere il link di anteprima o scaricare il sito come ZIP. Modificare in seguito testi e tema e ricreare il pacchetto è gratuito. Al prezzo di listino Basic la creazione di un sito costa 8.751 token (0,05 $) e ogni immagine generata 8.751 token (0,05 $); la stesura dei testi è indicata a parte nel preventivo, e il piano Free applica ×1,3 e il piano Pro ×0,8. I dettagli sono nella guida a Website Studio e nella guida alla pubblicazione, i prezzi aggiornati nella pagina dei prezzi.

Domande frequenti

Una pagina guidata dallo scorrimento danneggia la SEO? No, purché il testo sia vero HTML e la pagina si carichi rapidamente. I problemi nascono quando il contenuto vive solo dentro le immagini e la pagina diventa pesante.

Meglio usare un video o una sequenza di immagini? Per una riproduzione legata allo scorrimento la sequenza di immagini è più coerente; un file video è più leggero ma può scattare quando si torna indietro. Per i video di sfondo che si limitano a scorrere, basta un file video.

Che cos’è prefers-reduced-motion? È una media query CSS che comunica a una pagina web che l’utente ha chiesto al sistema operativo di ridurre il movimento. Quando è attiva, ci si aspetta che le animazioni ampie si fermino o vengano semplificate.

Le pagine guidate dallo scorrimento funzionano su mobile? Sì, ma i fotogrammi vanno dimensionati per gli schermi mobili e va verificata la visibilità del prodotto in un’inquadratura verticale.

Website Studio può creare un sito da zero, senza un video? A ottobre 2026 i siti vengono creati da un video Montaggio / Smontaggio. La creazione di un sito partendo solo da una descrizione è annunciata nell’app come in arrivo.