Como ele é
Funciona como uma esteira: você rola para baixo e, em vez de descer, o conteúdo anda para a esquerda. A seção fica parada na tela e passa por um painel de abertura com título grande, por painéis com números vazados na cor de destaque, título, texto curto e foto de cantos arredondados, e termina numa frase final com espaço para um botão. Dentro de cada moldura, a foto corre um pouco mais devagar que o painel, o que cria profundidade. Embaixo, uma linha fina se preenche com um gradiente de anil para ciano ao lado de um contador. O fundo padrão é um branco quente com texto azul-marinho.
Você pode estar procurando isto se pediu algo assim
- conteúdo que anda para o lado enquanto rolo a página para baixo
- seção que trava na tela e os cards passam na horizontal
- mostrar as etapas do nosso processo deslizando para o lado
- linha do tempo da empresa que corre na horizontal com o scroll
- aquele efeito de site premiado em que a rolagem vira lateral
- vitrine de serviços em painéis grandes que passam um por um
- galeria horizontal controlada pela rolagem, com barra de progresso
Também chamado de
- rolagem horizontal
- horizontal scroll
- scroll lateral
- sticky horizontal scroll
- scroll-driven animation
- seção fixada
- pinned section
- parallax scroll
Quando usar
- Página de processo de trabalho, com uma etapa por painel
- Linha do tempo da empresa ou da história de um produto
- Case de cliente contado em etapas, com imagens grandes
- Vitrine de serviços em portfólio de agência ou estúdio
Quando evitar
- Conteúdo que a pessoa precisa comparar lado a lado ou consultar fora de ordem
- Textos longos: em áreas estreitas, o parágrafo de cada painel fica escondido
- Páginas com várias seções fixadas em sequência, que deixam a rolagem cansativa
Como pedir para a sua IA
Crie uma seção de rolagem horizontal fixada na página de serviços: ao rolar para baixo, painéis com título, texto e foto deslizam para o lado, com barra de progresso, paralaxe suave nas imagens, navegação pelas setas do teclado e paralaxe desligada 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 Balsa
Balsa funciona em todos os navegadores?
Funciona. Onde há suporte a animações guiadas por rolagem do CSS, Balsa deixa com o CSS o movimento da trilha, da barra e da paralaxe; nos demais navegadores, uma reserva em JavaScript aplica as mesmas transformações durante a rolagem. Nos dois casos, a seção tem o próprio contêiner rolável.
Balsa funciona no celular?
Funciona. Em Balsa, deslizar o dedo para cima move a trilha para o lado, como a roda do mouse. Em áreas de até 560 pixels de largura, cada painel empilha título e foto e esconde o parágrafo, então deixe a mensagem principal no título. O prompt do THM Componentes também pede teste em mobile comparando LCP e INP.
Balsa respeita menos movimento e funciona pelo teclado?
Sim. Com a preferência de reduzir movimento ativa, Balsa desliga a paralaxe das fotos e a seta animada da abertura; a trilha continua andando com a rolagem, porque é a própria pessoa que a move. Pelo teclado, a área recebe foco e as setas laterais levam de um painel ao outro, com salto direto nesse modo.
