Como evitar rodinhas de mouse aos trancos e taxas de quadros irregulares em gravações de rolagem

Por que gravações de tela de um site rolando travam, tremem ou perdem quadros, e a solução para cada causa: a rodinha, o gravador, a tela e a própria página.

Aviral LakhanpaulAtualizado em 30 de outubro de 20264 min de leitura

A resposta curta

Gravações de rolagem travadas costumam ter cinco causas: uma rodinha de mouse com degraus que move a página aos trancos, um gravador que usa taxa de quadros variável, uma taxa de quadros baixa demais para um movimento contínuo, uma tela que atualiza numa frequência diferente da gravação e uma página pesada que não acompanha. Role com um script em vez da rodinha, grave a 60 fps constantes e deixe a página carregada antes de começar. Ou gere o vídeo a partir da URL, em que cada quadro é calculado e nenhum pode se perder.

Descubra a sua causa primeiro

Sintomas de uma gravação de rolagem travada e suas causas
O que você vê	Causa provável
A página anda aos trancos, com pausas mínimas entre eles	Uma rodinha de mouse com degraus, suavizada pelo navegador um degrau por vez
A velocidade aumenta e diminui, nunca fica estável	Um toque rápido no trackpad e o embalo que vem depois
Fluido na tela, travado no arquivo ou no editor	Gravação com taxa de quadros variável
Um tremor regular e ritmado nas rolagens rápidas	Poucos quadros por segundo, ou uma diferença em relação à frequência da tela
Congela por um instante e depois pula para a frente	A página ou a máquina perdendo quadros: imagens com carregamento lento, scripts pesados, um codificador sobrecarregado

1. A rodinha do mouse anda em degraus

Uma rodinha de mouse comum gira de degrau em degrau, e cada degrau pede à página que se mova uma distância fixa. Os navegadores suavizam cada passo com uma animação curta, então um giro contínuo da rodinha vira uma sequência de pequenos arranques e paradas. Na tela, o olho perdoa. Num vídeo, reproduzido numa tela grande, isso aparece como travamento.

A melhor solução: não use a rodinha. Deixe um script rolar a página numa velocidade definida; o guia de rolagem automática tem um para copiar.
Se você precisa rolar à mão: uma rodinha de giro livre ou um trackpad com um arraste lento e constante é melhor que uma rodinha com degraus, mas nenhuma mão mantém a mesma velocidade por vinte segundos.

2. O gravador usa taxa de quadros variável

Muitos gravadores nativos, incluindo a barra de captura de tela do macOS e o QuickTime, só gravam um quadro quando algo muda na tela. Isso economiza espaço, mas o intervalo entre os quadros varia, e editores de vídeo e alguns players lidam mal com isso: quadros são duplicados ou descartados para caber numa linha do tempo fixa, e a rolagem treme.

Grave com uma ferramenta que use taxa de quadros constante, como o OBS Studio, configurado em 60 fps.
Se você já tem um arquivo com taxa de quadros variável, converta-o para taxa constante antes de editar. A opção «Constant Framerate» do HandBrake faz isso.

3. Poucos quadros para um movimento contínuo

Uma rolagem move todos os pixels a cada quadro. A 30 fps, cada quadro salta o dobro da distância que a 60, e em páginas cheias de texto o olho percebe os saltos. 24 fps é a taxa do cinema e combina com cinema; numa página rolando, em qualquer velocidade, é a menos fluida das três.

Grave e exporte a 60 fps quando o movimento for o essencial. Desça para 30 só para ter arquivos menores e, nesse caso, deixe a rolagem mais lenta. A maioria das ferramentas limita o GIF a uma taxa baixa, então mantenha as rolagens em GIF curtas e suaves.

4. A tela e a gravação não batem

Se a sua tela atualiza a 120 ou 144 Hz e você grava a 60 fps, o gravador fica com mais ou menos um quadro a cada dois, e numa tela com taxa de atualização variável nem isso de forma regular. Colocar a tela em 60 Hz durante a gravação dá ao gravador uma correspondência de um para um. Num Mac com ProMotion, essa opção fica em Telas, Taxa de Atualização.

5. A página não acompanha

Imagens com carregamento lento são decodificadas no instante em que entram na tela, e esse trabalho rouba quadros. Role até o fim e volte antes de gravar, para tudo já estar carregado.
Páginas com scripts pesados ligados à rolagem, vídeos de fundo ou efeitos em WebGL exigem muito da máquina. Feche outros apps e abas do navegador.
Gravar e codificar ao mesmo tempo disputa a CPU com a página. Use o codificador por hardware do gravador, se ele tiver um.

A solução que elimina as cinco

Todas as causas acima vêm de capturar movimento em tempo real numa tela real. Um renderizador não faz nenhuma das duas coisas. O Website Scroll Video lê a página uma vez, espera as imagens e as fontes e então calcula onde a página deve estar em cada quadro e o desenha. Não há rodinha com degraus, frequência de tela para acertar nem prazo que um quadro possa perder, então o vídeo mantém 24, 30 ou 60 fps fixos, por mais longa ou pesada que seja a página.

Teste no seu próprio site

Cole um link e veja a prévia da rolagem de graça. 51 créditos grátis ao criar a conta, sem cartão e sem marca d’água em nada que você exportar.

Perguntas
e respostas

A versão curta do que as pessoas perguntam em seguida.

Contato

Por que minha gravação de tela rolando parece travada?

Normalmente porque a rodinha do mouse move a página em degraus, ou porque o gravador usa taxa de quadros variável. Role com um script e grave a 60 fps constantes, ou gere o vídeo a partir da URL em vez de gravá-lo.

30 fps bastam para um vídeo de rolagem de site?

Funcionam para rolagens lentas e arquivos pequenos. Para qualquer coisa mais rápida, 60 fps é visivelmente mais fluido, porque cada quadro move a página só metade da distância.

Como corrijo uma gravação com taxa de quadros variável?

Recodifique o arquivo para uma taxa de quadros constante antes de editar, por exemplo com a opção Constant Framerate do HandBrake, ou grave de novo com uma ferramenta como o OBS, que usa taxa constante.

Menos tempo gravando. Mais tempo criando.

Automatize gravações de sites com movimento personalizável, controles inteligentes e opções de exportação pensadas para criadores de hoje.

Experimente agora