Como ele é
Funciona como uma reportagem especial de jornal na internet. De um lado, os passos da história sobem com a rolagem: o que está em foco aparece nítido, com número, rótulo na cor de destaque, título e texto, e os outros ficam apagados. Do outro, uma moldura de cantos arredondados fica parada e reage a cada passo: troca de foto com um esmaecer, aproxima um detalhe ou fecha o enquadramento, sempre com um leve zoom que acompanha a rolagem. Sobre a foto aparecem um selo com o passo atual e, quando há, um número grande em gradiente. Embaixo, barrinhas marcam o progresso de cada passo.
Você pode estar procurando isto se pediu algo assim
- seção que vai contando a história conforme a pessoa rola
- imagem parada de um lado e o texto passando do outro
- case de cliente contado em etapas com fotos que mudam
- aquele estilo de reportagem especial em que a imagem muda com o scroll
- foto que dá zoom num detalhe quando chega a parte certa do texto
- relatório de impacto com números aparecendo durante a leitura
- página da história da empresa com mais emoção que uma lista de datas
Também chamado de
- imagem fixa com texto rolando
- narrativa no scroll
- sticky scroll
- storytelling com rolagem
- scroll storytelling
- sticky media
- reportagem interativa
Quando usar
- Cases de clientes contados em etapas, do problema ao resultado
- Relatórios de impacto e prestação de contas com números de destaque
- Apresentação de produto em que cada passo mostra um detalhe da imagem
- Página de história da marca ou da fundação da empresa
Quando evitar
- Conteúdo de consulta rápida, em que a pessoa quer pular direto para uma parte
- Histórias sem imagens fortes, porque a mídia fixa ocupa metade da área
Como pedir para a sua IA
Crie uma seção de scrollytelling para o case do meu cliente: imagem fixa de um lado que troca, dá zoom num ponto de foco ou recorta conforme cada passo de texto entra em foco, com números em destaque, barra de progresso, layout empilhado no celular e trocas sem animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Roteiro
Como Roteiro fica no celular?
Em áreas com menos de 680 pixels de largura, Roteiro muda de layout: a imagem fica fixa no topo, ocupando quase metade da altura, e os passos sobem por baixo dela em cartões brancos. A linha que define o passo ativo desce para perto da base, e o prompt do THM Componentes pede teste em mobile com LCP e INP.
Dá para trocar as imagens e os textos de Roteiro?
Dá. Cada passo de Roteiro recebe rótulo, título, texto, imagem e texto alternativo, e pode ter zoom com ponto de foco, recorte do quadro e um número em destaque formatado em pt-BR, como porcentagem ou valor compacto. A prop side põe a imagem à direita ou à esquerda, e o componente rola dentro da própria área, que precisa de altura definida.
Roteiro é acessível e respeita menos movimento?
É. A área de Roteiro recebe foco e rola pelo teclado, o passo ativo é marcado para leitores de tela e cada troca é anunciada numa região ao vivo, com o número do passo e o título. Com a preferência de reduzir movimento, trocas, zoom e recorte acontecem sem transição e o zoom contínuo da imagem é desligado.
