Come catturare animazioni di scorrimento e parallax nel video di un sito

Dissolvenze, comparse, parallax e sezioni fissate esistono solo mentre una pagina scorre davvero. Come catturarli in un video, e perché la maggior parte degli strumenti di cattura a pagina intera li perde.

Aviral LakhanpaulAggiornato il 30 ottobre 20263 min di lettura

La risposta breve

Le animazioni di scorrimento partono solo mentre la pagina scorre davvero, quindi uno strumento che fa una panoramica su un unico screenshot a pagina intera non può mostrarle. Registra lo schermo mentre uno script fa scorrere la pagina, oppure usa un renderer che cattura la pagina dal vivo a ogni posizione di scorrimento, come il motore Cattura dal vivo di Website Scroll Video. Per un risultato più rapido senza il movimento, porta le animazioni di ingresso al loro stato finale prima di catturare.

Perché le animazioni spariscono

La maggior parte degli strumenti da URL a video lavora in due passaggi: scatta un unico screenshot molto alto della pagina, poi ci fa scorrere sopra un’inquadratura. È veloce e perfettamente fluido, ma lo screenshot è un singolo istante. Tutto ciò che dipende dalla posizione di scorrimento, come un titolo che compare in dissolvenza entrando nel viewport, un’immagine in parallax, una sezione che si fissa e cambia mentre scorri o un contatore che sale, resta congelato nello stato in cui si trovava in quell’istante.

A seconda di come è stata costruita la pagina, quello stato è uno di questi tre:

Finito, che sembra a posto ma statico.
Non ancora iniziato, che lascia spazi vuoti dove dovrebbero esserci sezioni, perché gli elementi in attesa di comparire sono ancora invisibili.
A metà, colto nel mezzo di una dissolvenza o di uno scorrimento, che sembra rotto.

Le tue opzioni

Modi per catturare le animazioni di scorrimento
Approccio	Animazioni	Scorrimento	Velocità
Panoramica su un’immagine ferma, ingressi assestati	Mostrate nel loro stato finale	Calcolato, perfettamente regolare	Veloce
Cattura dal vivo a ogni posizione di scorrimento	Si vedono come le vede un visitatore	Calcolato, a frame rate bloccato	Molto più lenta
Registrazione dello schermo con uno script che scorre	Si vedono in tempo reale	Regolare quanto permette il tuo computer	Tempo reale, più il montaggio

La via rapida: assestarle prima

Se le animazioni sono solo di ingresso, dissolvenze e scivolamenti che portano i contenuti al loro posto, di solito la pagina è a posto nel suo stato finale. In Website Scroll Video è l’interruttore «Assesta le animazioni», da usare con il motore veloce Panoramica statica. Le animazioni di ingresso vengono portate alla fine prima di leggere la pagina, così niente resta invisibile o a metà, e lo scorrimento è fluido e veloce da renderizzare come qualsiasi altro.

La via fedele: catturarle dal vivo

Quando il movimento è il punto, come nella maggior parte dei template Framer e Webflow, dei siti di agenzia e dei lanci di prodotto, passa il motore a Cattura dal vivo. Invece di fare una panoramica su un’unica immagine, porta un browser vero a ogni posizione di scorrimento e fa lì lo screenshot, così comparse, parallax, sezioni fissate e trasformazioni legate allo scorrimento si vedono nel video esattamente come sulla pagina.

Lo scorrimento resta calcolato, quindi è regolare quanto con Panoramica statica e mantiene 24, 30 o 60 fps bloccati.
Pause, interazioni al passaggio, cornici e sfondi funzionano tutti, esattamente come con Panoramica statica.
Tiene occupato un browser vero per tutta la durata del video, per questo il rendering è molto più lento e aggiunge 13 crediti a un’esportazione. È disponibile su ogni account dalla prima esportazione, senza nessun piano da sbloccare.

Registrarle da te

Per una pagina che un renderer non può raggiungere, registra lo schermo mentre uno script la fa scorrere. La guida allo scorrimento automatico ha lo script. Due cose a cui fare attenzione:

I siti che usano una libreria di smooth scroll, come Lenis o Locomotive Scroll, spesso guidano le animazioni dalla libreria invece che dallo scorrimento del browser. Uno script che chiama window.scrollTo può saltarle. Scorri nel modo che il sito si aspetta, oppure registra con la libreria disattivata e accetta la differenza.
Le pagine piene di animazioni sono quelle che più facilmente perdono fotogrammi durante la registrazione. Chiudi tutto il resto, registra a 60 fps e, se la ripresa scatta ancora, leggi eliminare gli scatti nelle registrazioni dello scorrimento.

Provalo sul tuo sito

Incolla un link e guarda l’anteprima dello scorrimento gratis. 51 crediti gratuiti all’iscrizione, senza carta e senza filigrana su nulla di ciò che esporti.

Domande
e risposte

In breve, quello che di solito si chiede dopo.

Contatti

Perché nel mio video di scorrimento del sito ci sono sezioni vuote?

Sono elementi in attesa di un ingresso attivato dallo scorrimento che non è mai partito, perché lo strumento ha catturato un’immagine ferma della pagina. Assesta le animazioni prima della cattura, oppure usa un motore di cattura dal vivo che fa scorrere la pagina vera.

Posso registrare effetti di scorrimento in parallax?

Sì, con un metodo che fa scorrere davvero la pagina: una registrazione dello schermo guidata da uno script, o un renderer che cattura a ogni posizione di scorrimento, come Cattura dal vivo in Website Scroll Video.

Cattura dal vivo costa di più?

Aggiunge 13 crediti a un’esportazione, perché tiene acceso un browser vero per tutta la durata del video. Per il resto il prezzo è lo stesso.

Meno tempo a registrare. Più tempo a costruire.

Automatizza le registrazioni dei siti con movimento personalizzabile, controlli intelligenti e opzioni di esportazione pensate per i creator di oggi.

Provalo ora