Come evitare rotelle del mouse a scatti e frame rate irregolari nelle registrazioni dello scorrimento

Perché le registrazioni dello schermo di un sito che scorre scattano, tremolano o perdono fotogrammi, e il rimedio per ogni causa: la rotella, il registratore, lo schermo e la pagina stessa.

Aviral LakhanpaulAggiornato il 30 ottobre 20264 min di lettura

La risposta breve

Le registrazioni dello scorrimento a scatti hanno di solito cinque cause: una rotella del mouse a scatti che muove la pagina a gradini, un registratore che scrive un frame rate variabile, un frame rate troppo basso per un movimento continuo, uno schermo che si aggiorna a una frequenza diversa da quella della registrazione e una pagina pesante che non riesce a tenere il passo. Fai scorrere con uno script invece che con la rotella, registra a 60 fps costanti e precarica la pagina. Oppure genera il video dall’URL, dove ogni fotogramma è calcolato e nessuno può andare perso.

Prima trova la tua causa

Sintomi di una registrazione dello scorrimento a scatti e loro cause
Cosa vedi	Causa probabile
La pagina avanza a strappi con minuscole pause in mezzo	Una rotella del mouse a scatti, ammorbidita dal browser uno scatto alla volta
La velocità cresce e cala, mai costante	Una spinta sul trackpad e la sua inerzia
Fluida sullo schermo, a scatti nel file o nell’editor	Registrazione a frame rate variabile
Un tremolio regolare e ritmico negli scorrimenti veloci	Troppo pochi fotogrammi al secondo, o una discordanza con la frequenza dello schermo
Si blocca per un attimo, poi salta in avanti	La pagina o il computer che perdono fotogrammi: immagini caricate in differita, script pesanti, un encoder in affanno

1. La rotella del mouse si muove a gradini

Una normale rotella del mouse procede a scatti, e ogni scatto chiede alla pagina di spostarsi di una distanza fissa. I browser ammorbidiscono ogni gradino con una breve animazione, quindi un giro continuo della rotella diventa una catena di piccoli movimenti che accelerano e si fermano. Sullo schermo l’occhio perdona. In un video, riprodotto su un grande schermo, si vede come uno scatto.

Il rimedio migliore: non usare la rotella. Lascia che uno script faccia scorrere la pagina a una velocità stabilita; la guida allo scorrimento automatico ne ha uno da copiare.
Se devi per forza scorrere a mano: una rotella a rotazione libera o un trackpad trascinato lentamente e con costanza è meglio di una rotella a scatti, ma nessuna mano tiene una velocità per venti secondi.

2. Il registratore scrive un frame rate variabile

Molti registratori integrati, tra cui la barra degli screenshot di macOS e QuickTime, scrivono un fotogramma solo quando qualcosa cambia sullo schermo. Così si risparmia spazio, ma gli intervalli tra i fotogrammi variano, e gli editor video e alcuni player li gestiscono male: i fotogrammi vengono duplicati o scartati per rientrare in una timeline fissa, e lo scorrimento tremola.

Registra con uno strumento che scrive un frame rate costante, come OBS Studio, impostato a 60 fps.
Se hai già un file a frame rate variabile, convertilo a frame rate costante prima di montarlo. Lo fa l’opzione «Constant Framerate» di HandBrake.

3. Troppo pochi fotogrammi per un movimento continuo

Uno scorrimento muove ogni pixel a ogni fotogramma. A 30 fps ogni fotogramma salta il doppio rispetto a 60, e sulle pagine piene di testo l’occhio vede i salti. 24 fps è la cadenza del cinema e va bene per il cinema; per una pagina che scorre a qualsiasi velocità è la meno fluida delle tre.

Registra ed esporta a 60 fps quando il movimento è il punto. Scendi a 30 solo per avere file più leggeri, e in quel caso rallenta lo scorrimento. La maggior parte degli strumenti limita molto le GIF, quindi tieni gli scorrimenti in GIF brevi e delicati.

4. Lo schermo e la registrazione non vanno d’accordo

Se il tuo schermo si aggiorna a 120 o 144 Hz e registri a 60 fps, il registratore tiene più o meno un fotogramma ogni due, e su uno schermo a frequenza variabile nemmeno in modo regolare. Impostare lo schermo a 60 Hz mentre registri dà al registratore una corrispondenza uno a uno. Su un Mac con ProMotion, l’impostazione è in Monitor, Frequenza di aggiornamento.

5. La pagina non tiene il passo

Le immagini caricate in differita vengono decodificate nel momento in cui entrano in vista, e quel lavoro ruba fotogrammi. Scorri fino in fondo e torna su prima di registrare, così tutto è già caricato.
Le pagine con script pesanti legati allo scorrimento, sfondi video o effetti WebGL mettono il computer sotto sforzo. Chiudi le altre app e le altre schede del browser.
Registrare e codificare nello stesso momento contende la CPU alla pagina. Usa l’encoder hardware del registratore, se ne ha uno.

Il rimedio che le elimina tutte e cinque

Ogni causa qui sopra nasce dal catturare un movimento in tempo reale su uno schermo vero. Un renderer non fa né l’una né l’altra cosa. Website Scroll Video legge la pagina una volta, aspetta immagini e font, poi calcola dove deve trovarsi la pagina in ogni fotogramma e lo disegna. Non c’è nessuna rotella che va a gradini, nessuna frequenza dello schermo da far combaciare e nessuna scadenza che un fotogramma possa mancare, quindi il risultato mantiene 24, 30 o 60 fps bloccati, per quanto lunga o pesante sia la pagina.

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é la mia registrazione dello schermo mentre scorro sembra a scatti?

Di solito perché una rotella del mouse muove la pagina a scatti, o perché il registratore scrive un frame rate variabile. Fai scorrere con uno script e registra a 60 fps costanti, oppure genera il video dall’URL invece di registrarlo.

30 fps bastano per un video di scorrimento di un sito?

Vanno bene per scorrimenti lenti e file leggeri. Per qualsiasi cosa più veloce, 60 fps sono nettamente più fluidi, perché ogni fotogramma sposta la pagina della metà.

Come sistemo una registrazione a frame rate variabile?

Ricodificala a frame rate costante prima di montarla, per esempio con l’impostazione Constant Framerate di HandBrake, oppure registra di nuovo con uno strumento come OBS che scrive un frame rate costante.

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