Como capturar animações de rolagem e parallax num vídeo de site

Fade-ins, revelações, parallax e seções fixas só acontecem enquanto a página rola de verdade. Como capturá-los num vídeo, e por que a maioria das ferramentas de captura de página inteira os perde.

Aviral LakhanpaulAtualizado em 30 de outubro de 20263 min de leitura

A resposta curta

As animações de rolagem só rodam enquanto a página está rolando de verdade, então uma ferramenta que percorre uma única captura da página inteira não consegue mostrá-las. Grave a tela enquanto um script rola a página, ou use um renderizador que captura a página ao vivo em cada posição da rolagem, como o motor Captura ao vivo do Website Scroll Video. Para um resultado mais rápido, sem o movimento, leve as animações de entrada até o estado final antes de capturar.

Por que as animações somem

A maioria das ferramentas de URL para vídeo trabalha em duas etapas: tira uma captura de tela bem comprida da página e depois desliza um enquadramento por ela. Isso é rápido e perfeitamente fluido, mas a captura é um único instante. Tudo o que depende da posição da rolagem, como um título que surge ao entrar na tela, uma imagem com parallax, uma seção que fica fixa e muda enquanto você rola ou um contador que vai subindo, fica congelado no estado em que estava naquele instante.

Dependendo de como a página foi feita, esse estado é um destes três:

Concluído, o que fica bom, mas estático.
Não iniciado, o que deixa buracos em branco onde deveriam estar seções, porque os elementos à espera do fade-in continuam invisíveis.
No meio do caminho, pego no meio do fade ou do deslize, o que parece quebrado.

Suas opções

Jeitos de capturar animações de rolagem
Abordagem	Animações	Rolagem	Velocidade
Percorrer uma imagem parada, com as entradas assentadas	Aparecem no estado final	Calculada, perfeitamente uniforme	Rápida
Captura ao vivo em cada posição da rolagem	Tocam como um visitante as vê	Calculada, com quadros fixos	Bem mais lenta
Gravação de tela com um script de rolagem	Tocam em tempo real	Tão uniforme quanto a sua máquina permitir	Tempo real, mais a edição

O caminho rápido: assente as animações antes

Se as animações são só de entrada, fades e deslizes que trazem o conteúdo para o lugar, a página costuma ficar certa no estado final. No Website Scroll Video, isso é a opção «Assentar animações», usada com o motor rápido Deslocamento estático. As animações de entrada são levadas até o fim antes de a página ser lida, então nada fica invisível nem pela metade, e a rolagem fica tão fluida e rápida de renderizar quanto qualquer outra.

O caminho fiel: capture ao vivo

Quando o movimento é o essencial, como na maioria dos templates do Framer e do Webflow, nos sites de agências e nos lançamentos de produto, mude o motor para Captura ao vivo. Em vez de percorrer uma imagem, ela rola um navegador de verdade até cada posição e fotografa a página ali, então revelações, parallax, seções fixas e transformações ligadas à rolagem tocam no vídeo exatamente como na página.

A rolagem continua calculada, então é tão uniforme quanto no Deslocamento estático e mantém 24, 30 ou 60 fps fixos.
Pausas, hovers, molduras e fundos funcionam com ela, exatamente como no Deslocamento estático.
Ela mantém um navegador de verdade aberto durante toda a duração do vídeo, por isso renderiza bem mais devagar e soma 13 créditos à exportação. Está disponível em qualquer conta desde a primeira exportação, sem plano para desbloquear.

Gravando você mesmo

Para uma página que um renderizador não alcança, grave a tela enquanto um script rola. O guia de rolagem automática tem o script. Duas coisas pedem atenção:

Sites que usam uma biblioteca de rolagem suave, como Lenis ou Locomotive Scroll, muitas vezes comandam as animações pela biblioteca, e não pela rolagem do navegador. Um script que chama window.scrollTo pode passar direto por elas. Role do jeito que o site espera, ou grave com a biblioteca desligada e aceite a diferença.
Páginas carregadas de animações são as que mais tendem a perder quadros durante a gravação. Feche todo o resto, grave a 60 fps e veja como corrigir gravações de rolagem travadas se a tomada ainda travar.

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 há seções em branco no meu vídeo de rolagem de site?

São elementos à espera de uma animação de entrada acionada pela rolagem que nunca disparou, porque a ferramenta capturou uma imagem parada da página. Assente as animações antes da captura ou use um motor de captura ao vivo que role a página de verdade.

Dá para gravar efeitos de parallax na rolagem?

Dá, com um método que role a página de verdade: uma gravação de tela comandada por um script, ou um renderizador que captura em cada posição da rolagem, como a Captura ao vivo do Website Scroll Video.

A Captura ao vivo custa a mais?

Ela soma 13 créditos à exportação, porque mantém um navegador de verdade rodando durante toda a duração do vídeo. Todo o resto do preço é igual.

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