Como ele é
Lembra o rodapé de notícias da TV, só que com cartões. O conteúdo que você coloca dentro é repetido quatro vezes lado a lado e desliza num ritmo constante, sem aceleração, num ciclo de 40 segundos por padrão; quando uma cópia sai por um lado, a seguinte já ocupa o lugar, então a emenda não aparece. O espaço entre os itens e a velocidade ficam em variáveis CSS. Dá para inverter o sentido, rolar na vertical e pausar quando o mouse passa por cima. Na demo, duas fileiras de depoimentos correm em sentidos opostos, com as bordas laterais esmaecendo no fundo da página, no modo claro e no escuro.
Você pode estar procurando isto se pediu algo assim
- logos dos clientes passando sem parar numa faixa
- faixa de depoimentos rolando na horizontal
- aquela fileira de marcas que fica deslizando no meio da landing page
- texto ou tags passando em loop tipo letreiro
- carrossel infinito automático que para quando passo o mouse
- coluna de avaliações subindo sozinha ao lado do formulário
- mostrar parceiros e patrocinadores rolando sem botão de avançar
Também chamado de
- faixa de logos rolando
- faixa infinita
- infinite scroll strip
- logo carousel
- letreiro rolante
- ticker
- carrossel infinito
Quando usar
- Faixa de logos de clientes, parceiros ou patrocinadores
- Mural de depoimentos curtos em duas fileiras com sentidos opostos
- Lista de tags, serviços ou tecnologias numa landing page
- Coluna vertical de avaliações ao lado de um formulário ou checkout
Quando evitar
- Informação que a pessoa precisa ler com calma, como preços ou condições
- Depoimentos longos, que passam antes de a leitura terminar quando a pausa no hover está desligada
Como pedir para a sua IA
Crie uma faixa marquee com os logos dos meus clientes rolando em loop infinito na horizontal, só com CSS, com pausa quando o mouse passa por cima, bordas esmaecidas nas laterais, cópias repetidas ocultas ao leitor de tela e versão parada para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Comboio
Comboio deixa o site lento?
Não costuma deixar. Comboio anima apenas a posição dos itens com uma animação CSS contínua, sem JavaScript de animação nem WebGL, e tem peso Leve no THM Componentes. O cuidado está no conteúdo: como os itens se repetem quatro vezes por padrão, use logos leves, de preferência em SVG, e compare o LCP antes e depois.
Comboio respeita quem prefere menos movimento?
O componente original rola sempre. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, e em Comboio isso é simples: pausar a animação CSS e mostrar os itens parados, numa grade ou numa fileira com rolagem manual.
O leitor de tela lê os logos de Comboio várias vezes?
Pode ler. Comboio repete o conteúdo quatro vezes por padrão e não marca as cópias como ocultas para tecnologias assistivas, então um leitor de tela encontra os mesmos itens repetidos. Vale pedir à IA para esconder as cópias extras com aria-hidden e deixar só a primeira legível.
