Softonic

Gerador de Texto Rolante

Etapa 1 / 3

Escreva sua mensagem

Uma linha, até 500 caracteres. Emojis também funcionam.

Próximo: personalizar

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. Adicione animation-direction: reverse ao elemento que recebe a animação (.scrolling-text__track no código gerado). As duas cópias mantêm o loop contínuo nos dois sentidos, o que é ú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.

Sua mensagem fica no seu navegador. Ela não é enviada aos nossos servidores nem adicionada ao link da página. Esta aba a guarda apenas para que a próxima etapa possa exibi-la, e “Recomeçar” ou fechar a aba a apaga. As configurações de exibição (velocidade, direção, fonte, tamanho, cores e efeitos) passam de uma etapa para outra no link da página.

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, em um idioma real ou em um estilo inventado.

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.

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.

Gerador de Fonte do Instagram

Gere "fontes" Unicode (negrito, itálico, script, monoespaçado, fraktur) que podem ser coladas diretamente na sua bio, nome, legendas e comentários do Instagram.

Gerador de Texto Assustador

Transforme texto simples em texto zalgo / glitch assustador usando marcas combinatórias Unicode. Intensidade ajustável. Funciona em redes sociais, Discord e na maioria das fontes.

Ferramenta disponível em outros idiomas