Um site pode contar uma história enquanto a pessoa percorre a página: em vez de assistir a um vídeo separado, o visitante vê as cenas avançarem junto com a rolagem. O modelo Criativo da Blue Commerce usa essa ideia em uma experiência visual de marca. Neste guia, você vai entender como planejar e construir um efeito parecido, com atenção à leitura, ao celular, à velocidade e à acessibilidade.
O que é um site com vídeo controlado pela rolagem?
É uma página em que o avanço do visitante pela rolagem determina a progressão de uma animação ou de cenas de vídeo. Ao descer, a história segue; ao subir, ela pode voltar. A rolagem funciona como uma linha do tempo interativa. Isso é diferente de um vídeo que começa sozinho ao entrar na tela: no efeito guiado pela rolagem, o ritmo fica nas mãos de quem navega.
O termo “scrollytelling” costuma descrever esse formato de narrativa. Ele pode valorizar uma coleção, apresentar etapas de um serviço ou destacar um produto. No site Criativo, a proposta é mostrar uma identidade visual em movimento. A técnica precisa servir a uma mensagem clara; movimento por si só não substitui conteúdo, navegação ou uma chamada para ação.
1. Defina a história antes de produzir o vídeo
Comece com uma pergunta simples: o que a pessoa deve entender ao chegar ao fim da página? Para uma marca de beleza, por exemplo, a história pode mostrar a inspiração, a textura das cores, o resultado visual e, por fim, um convite para conhecer a coleção ou entrar em contato. Para outro negócio, a sequência pode apresentar um produto, seus detalhes e o benefício principal.
Escreva uma frase para cada etapa e transforme-as em um storyboard. Planeje também o texto que aparece junto das cenas: cada bloco deve ser curto, legível e ligado ao momento visual correspondente. Antes de filmar, decida a proporção, a duração, a iluminação, os enquadramentos e a área livre onde os títulos ficarão. Isso evita tentar corrigir na programação um vídeo que não foi pensado para a tela.
2. Monte uma página que também funcione sem o efeito
Estruture primeiro o conteúdo essencial: título, explicação, informações do produto ou serviço, prova de confiança e chamada para ação. Depois, organize os trechos visuais em uma área de rolagem. Uma estrutura comum mantém o vídeo em posição fixa por um trecho da página enquanto os textos e capítulos passam ao lado ou por cima. No celular, a composição pode mudar para vídeo acima e texto abaixo.
O HTML precisa continuar semântico: use títulos em ordem, parágrafos reais, botões para ações e links descritivos. Não transforme todo o texto em imagem e não esconda informações importantes dentro do vídeo. Assim, buscadores, leitores de tela e visitantes que preferem uma experiência simples conseguem entender a oferta.
3. Sincronize o vídeo com a rolagem
Há duas abordagens comuns. A primeira liga o progresso da rolagem a animações de elementos — por exemplo, opacidade, posição ou escala. O CSS moderno oferece animações guiadas por rolagem para propriedades animáveis. A segunda abordagem controla um vídeo: mede-se o progresso dentro de um trecho da página e associa-se esse valor ao tempo do vídeo, do início ao fim.
Essas abordagens não são intercambiáveis. A linha do tempo de rolagem do CSS anima propriedades CSS; para buscar um instante específico do vídeo, a implementação normalmente precisa sincronizar o progresso com a linha do tempo do próprio vídeo em JavaScript. O vídeo deve estar carregado o suficiente para permitir essa busca, e a atualização precisa ser limitada para não disparar trabalho excessivo em cada evento de rolagem. Consulte a documentação da MDN sobre animações CSS guiadas por rolagem para os efeitos de interface e suas condições de suporte.
Em termos de planejamento: calcule o progresso entre 0% e 100% da seção; limite o valor nesse intervalo; converta-o para o tempo correspondente do vídeo; e atualize a imagem apenas quando o navegador puder renderizar o próximo quadro. Teste o efeito em diferentes velocidades de rolagem e ao voltar a página. Não esconda o conteúdo enquanto o vídeo carrega.
4. Prepare uma alternativa acessível
Movimento intenso pode incomodar pessoas com sensibilidade vestibular, enxaqueca ou outras necessidades. Respeite a preferência do sistema por movimento reduzido e ofereça uma versão estática ou uma sequência simplificada. Quando houver reprodução automática, mantenha o som desligado por padrão e disponibilize controles claros para pausar ou reproduzir.
Inclua textos equivalentes para comunicar o que é essencial nas imagens, mantenha contraste suficiente sobre o vídeo, preserve foco visível ao navegar pelo teclado e não faça a rolagem prender a pessoa em uma cena. A opção de reduzir movimento deve manter a mensagem e o caminho de contato. A orientação do web.dev sobre movimento e acessibilidade detalha formas de respeitar preferências por menos animação.
5. Cuide do carregamento e do celular
Vídeo pode pesar muito mais que uma imagem. Exporte o material no tamanho necessário para o espaço em que será exibido, comprima o arquivo, escolha um formato compatível com seus navegadores e não carregue vários vídeos grandes logo na primeira tela. Use uma imagem de capa enquanto o conteúdo prepara, dimensione o espaço para evitar saltos de layout e confira o consumo em uma conexão móvel real.
No celular, faça uma versão própria da composição: mantenha títulos curtos, botões fáceis de tocar e texto fora das áreas cobertas pela imagem. Se o controle quadro a quadro ficar pesado ou instável em aparelhos mais modestos, troque por poucas cenas leves disparadas por capítulos ou por uma imagem estática. A documentação do elemento de vídeo da MDN explica atributos e opções importantes do elemento HTML.
6. Teste antes de publicar
- O visitante entende a oferta antes de começar a rolar?
- As cenas avançam e voltam sem travar ou pular de forma brusca?
- O texto continua legível em telas pequenas?
- A página oferece uma alternativa quando o vídeo demora a carregar?
- Quem usa teclado ou prefere menos movimento consegue acessar a informação e o contato?
- O botão principal leva ao destino esperado e funciona no celular?
Meça também o desempenho e observe se a animação atrasa o conteúdo principal. Uma experiência visual bem feita chama atenção sem fazer a pessoa esperar para descobrir o que a empresa oferece.
Quando esse formato faz sentido?
Use uma narrativa guiada pela rolagem quando a transformação visual ajudar a explicar o produto: moda, cosméticos, arquitetura, lançamentos, portfólios e marcas com uma história visual forte. Para páginas com muitas informações, uma loja com catálogo amplo ou um serviço que exige leitura detalhada, priorize navegação simples e use o vídeo apenas onde acrescenta compreensão.
Quer ver a referência da Blue? Acesse o modelo Criativo ou explore outros modelos de sites premium e animados. A página do modelo está instável para abrir neste momento, então o tutorial descreve o conceito apresentado no catálogo e um caminho técnico geral, sem presumir os arquivos internos do projeto.
Leve essa experiência para a sua marca
Quer apresentar seu produto com mais impacto e uma navegação que funcione bem no celular? A Blue Commerce cria sites profissionais e páginas sob medida. Conheça os serviços da Blue Commerce e conte o que você quer construir.