Tag <marquee>: Como Fazer Texto Rolando (E a Forma Certa com CSS)
Como fazer um texto rolar na tela? Historicamente, o HTML usava a tag <marquee> para criar textos deslizando. Hoje, essa tag é obsoleta. A forma correta e moderna de criar letreiros é combinando uma div no HTML com as propriedades @keyframes e transform: translateX() do CSS.
Como o nosso curso Programação Progressiva visa ensinar absolutamente tudo sobre a criação de sites, nós vamos, ao longo desta jornada, dar umas pausas no conteúdo estritamente teórico para mostrar alguns efeitos visuais e truques bacanas que chamam a atenção do usuário.
Se você navegou na internet nos anos 2000, com certeza já viu sites com textos deslizando da direita para a esquerda, piscando em neon ou quicando nas bordas da tela. É o famoso efeito "Letreiro de Padaria". Vamos aprender como isso era feito e como os desenvolvedores Sêniors fazem isso hoje.
A Versão Clássica (e Proibida): A Tag <marquee>
Antigamente, se você quisesse fazer um texto desfilar na tela, bastava "abraçar" esse texto com a tag <marquee>. Era absurdamente simples. Você escrevia no seu arquivo HTML algo assim:
<!DOCTYPE html>
<html lang="pt-BR">
<!-- A Tag clássica de rolagem -->
<marquee>
Seja bem-vindo ao portal Programação Progressiva!
</marquee>
</html>Resultado Clássico:
<marquee> no HTML5. Os navegadores ainda aceitam por "dó" e compatibilidade com sites velhos, mas você nunca deve usá-la em um projeto profissional moderno. O HTML foi feito para estruturar o texto, não para animá-lo. Para animações, usamos o CSS!
Quer dominar o HTML5 e o CSS3 de verdade?
Não fique preso a códigos dos anos 90. Aprenda as técnicas modernas e profissionais que as grandes empresas exigem hoje em dia para contratar um Desenvolvedor Front-End.
"Eu copiava códigos sem entender. Com essa apostila eu aprendi a pensar de forma moderna usando CSS! Recomendo muito!" - João Vitor, Web Designer.🚀 Baixar a Apostila Completa (PDF)
📚 Ou receba o Livro Físico em Casa
A Versão Moderna: Recriando o Marquee com CSS
Para fazermos do jeito certo (o famoso "Antes vs. Depois"), nós isolamos o HTML para cuidar apenas do texto, e usamos o CSS para fazer o trabalho pesado da animação através da regra @keyframes.
Veja como um código moderno é muito mais limpo e organizado:
<!-- O HTML apenas estrutura a informação -->
<div class="container-rolagem">
<p class="texto-animado">🚀 Olha eu rolando de forma otimizada e sem usar tags velhas!</p>
</div>
<style>
/* O CSS controla o palco e a animação */
.container-rolagem {
overflow: hidden; /* Esconde o texto que sai da caixa */
white-space: nowrap; /* Impede o texto de quebrar a linha */
background: #0f172a;
color: #38bdf8;
padding: 10px;
border-radius: 5px;
}
.texto-animado {
display: inline-block;
/* Chama a animação chamada 'rolar', dura 10s, ritmo constante (linear) e repete ao infinito */
animation: rolar 10s linear infinite;
}
/* Criando o quadro a quadro da animação */
@keyframes rolar {
0% { transform: translateX(100%); } /* Começa totalmente à direita */
100% { transform: translateX(-100%); } /* Termina totalmente à esquerda */
}
</style>Resultado Moderno com CSS:
🕵️♂️ Exercício: Modo Hacker (Inspecionando Códigos)
Boa parte do aprendizado de um Webmaster Sênior é a análise e o estudo do código dos outros. Isso é "hackear" no sentido puramente raiz da palavra: buscar informações, dissecar sistemas e descobrir novos conhecimentos.
Abaixo, eu coloquei 3 efeitos usando a tag antiga (apenas para fins de estudos). O seu exercício é clicar com o botão direito sobre eles, escolher a opção Inspecionar Elemento (Inspect) no Google Chrome e descobrir quais são os atributos extras que eu coloquei dentro da tag para fazer esses comportamentos acontecerem.
1. Efeito Bate e Volta:
2. Na Contra-Mão:
3. Elevador:
Conseguiu descobrir lendo o código-fonte? Esses "comandos" extras que modificam o comportamento de uma tag se chamam Atributos, e eles são exatamente o assunto da nossa próxima aula!
Perguntas Frequentes (FAQ)
1. A tag marquee afeta o SEO do meu site?
Sim, de forma indireta. Como é uma tag descontinuada (deprecated) pelo HTML5, o Google pode considerar o código do seu site antiquado e não-otimizado. Além disso, elementos em movimento constante, sem controle de pausa, prejudicam severamente a nota de acessibilidade do Core Web Vitals, penalizando o rankeamento.
2. Se a tag é obsoleta, por que os navegadores ainda exibem?
Isso acontece devido ao princípio de "Retrocompatibilidade" da web. O Google Chrome e o Firefox mantêm o suporte para não "quebrar" milhões de páginas antigas criadas nos anos 90 e 2000 que dependem dessa tag para funcionar, mas ela foi removida da documentação oficial moderna (MDN).
3. Qual a vantagem de usar a animação no CSS em vez do HTML?
O CSS foi criado exatamente para estilização e animação. Ao usar @keyframes com a propriedade transform, a animação do seu texto rolando é processada pela Placa de Vídeo (GPU) do usuário, e não pelo Processador (CPU), o que deixa a rolagem fluida, sem engasgos (60 fps) e economiza bateria de celulares.
📚 O que estudar a seguir:
Na nossa missão hacker acima, você descobriu códigos misteriosos dentro da tag. Seu próximo passo é dominar isso:
- O que são Atributos em HTML? (Modificando o comportamento).
- A anatomia de um elemento (Tag + Atributo + Valor).
- Introdução às Imagens e Links (Que dependem inteiramente de atributos).