Softonic

Gerador de Texto Rolante

Etapa 1 / 2
Próximo

Manchetes rolantes são como barras de anúncio, tickers de ações e banners de eventos que transmitem muitas informações em uma faixa estreita da tela. Este gerador recria o efeito clássico de HTML <marquee> com uma animação CSS @keyframes e transform: translateX() puras, então a técnica continua funcionando em todos os navegadores modernos sem a tag obsoleta. Escolha uma mensagem, ajuste a velocidade em segundos por loop, defina cores e tamanho da fonte, e visualize o ticker ao vivo antes de reconstruí-lo com o CSS mostrado abaixo.

Como construir um banner rolante

  1. 1

    Digite a mensagem

    Insira a manchete. Linhas curtas (4-10 palavras) são mais legíveis em uma faixa em movimento.

  2. 2

    Escolha a velocidade

    Menos segundos = rolagem mais rápida. 30-60 s por loop completo funciona para tickers de estilo noticioso.

  3. 3

    Defina cores e tamanho

    Escolha uma cor de primeiro plano para o texto, um fundo para a faixa e um tamanho de fonte que combine com a altura do seu cabeçalho.

  4. 4

    Visualize ao vivo

    A demonstração anima em tempo real para que você possa avaliar a legibilidade antes de publicar.

  5. 5

    Reconstrua em CSS

    Copie o padrão `@keyframes` e `transform: translateX()` mostrado abaixo para a sua própria folha de estilo para reproduzir o ticker no seu site.

Por que animação CSS em vez de <marquee>

A tag <marquee> foi descontinuada no HTML5 e é marcada pela WHATWG como obsoleta. Os navegadores ainda a renderizam por enquanto, mas ferramentas de acessibilidade e validadores reclamam, e você perde controle fino sobre a suavização e o looping. Uma animação transform: translateX() dentro de overflow: hidden oferece um comportamento visual idêntico com ferramentas modernas.

Ajustando a velocidade

O tempo de travessia depende tanto da duração quanto da largura total. Uma regra geral para uma viewport de 1200 px:

Duração Sensação Uso típico
10-20 s Rápido, atenção Vendas relâmpago, alertas urgentes
30-45 s Ticker de notícias Placar ao vivo, barras de manchete
60-90 s Ambiente Sinalização de locais, salas de conferência
120 s + Quase parado Decorativo, banners de marcas de luxo

Lista de verificação de acessibilidade

  • Envolva a faixa em role="marquee" ou aria-live="off" para que leitores de tela não reanunciem a mensagem a cada loop.
  • Respeite a redução de movimento com @media (prefers-reduced-motion: reduce) { animation: none; } e mostre o texto estaticamente.
  • Mantenha a razão de contraste de pelo menos 4.5:1 entre texto e fundo; texto em movimento é mais difícil de ler do que estático.
  • Nunca coloque informações críticas (avisos legais, preços, mensagens de erro) apenas dentro de uma faixa rolante.

Perguntas frequentes

Não. A visualização é um <div> com overflow: hidden e uma animação CSS @keyframes que move o span interno com translateX. Valida como HTML5 moderno.

Adicione animation-play-state: paused no seletor de hover do contêiner. Alguns usuários acham isso mais amigável do que um loop constante.

Sim. Altere o valor final de @keyframes de translateX(-100%) para translateX(100%) e comece de -100% para inverter a direção. Útil para idiomas RTL.

Não. As transformações CSS são executadas na GPU e o texto é HTML simples dentro do DOM, então os crawlers o leem normalmente e a animação não bloqueia a thread principal.

Tudo permanece no seu navegador enquanto você visualiza. Nada é enviado ou registrado.

Ferramentas relacionadas

Gerador de nomes de cidades

Gere nomes fictícios de cidades, vilas, aldeias e capitais para worldbuilding, mapas, jogos, histórias e dados fictícios, com notas curtas para cada resultado.

Gerador de Texto Negrito Itálico

Transforme texto comum em caracteres Unicode negrito itálico. Pronto para colar em bios do Instagram, Twitter/X, LinkedIn e Discord onde markdown não é suportado.

Símbolos de seta para copiar

Copie setas Unicode comuns em um clique: retas, duplas, diagonais, com gancho, circulares e triangulares para documentos, chats e designs.

Gerador de nomes para empresas

Gere ideias de nomes para empresas a partir de palavras-chave e estilos, e confira domínios, registros e marcas antes de escolher.

Gerador de anagramas

Digite uma palavra curta e veja cada reorganização única das letras, sem permutações duplicadas e com limite de resultados ajustável.

Gerador de Texto Amaldiçoado

Transforme texto normal em letras amaldiçoadas, estilo Zalgo, empilhadas com marcas combinatórias Unicode. Copie o caos para chats, legendas ou memes.

Ferramenta disponível em outros idiomas