Textos rolantes (ou “marquee”) são uma maneira interessante de adicionar dinamismo e movimento a uma página web. Embora a tag <marquee> tenha sido amplamente utilizada no passado, ela não é mais recomendada nas práticas modernas de desenvolvimento web devido à falta de suporte e acessibilidade. Em vez disso, podemos usar CSS para criar animações de texto rolante verticalmente, proporcionando uma experiência mais elegante e controlada. Neste post, aprenda como fazer textos rolantes verticalmente com CSS.
O que vamos aprender
Neste post, vamos:
- Entender como criar um efeito de texto rolante vertical.
- Usar CSS para estilizar e animar o texto.
- Implementar um exemplo prático.
Criando o efeito de texto rolante vertical
Para criar um texto rolante vertical, vamos usar a propriedade @keyframes do CSS para definir a animação e a propriedade transform para mover o texto para cima. A estrutura básica do nosso código HTML e CSS será a seguinte:
Estrutura HTML
Vamos começar com um exemplo simples de HTML que contém o texto que queremos animar:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto Rolante Vertical</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="marquee">
<p>Este é um texto rolante vertical com CSS!</p>
</div>
</div>
</body>
</html>Estilo CSS
Agora, vamos adicionar o CSS necessário para estilizar o contêiner e animar o texto:
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
height: 200px; /* Altura do contêiner */
overflow: hidden; /* Esconde o texto que está fora do contêiner */
position: relative;
background-color: #007BFF;
color: white;
}
.marquee {
position: absolute;
width: 100%; /* Largura total do contêiner */
animation: marquee 10s linear infinite; /* Chama a animação */
}
@keyframes marquee {
0% {
transform: translateY(100%); /* Inicia fora da tela, abaixo */
}
100% {
transform: translateY(-100%); /* Termina fora da tela, acima */
}
}Explicação do CSS
- Estilos do corpo: Definimos margens e uma cor de fundo leve para o corpo da página;
- Contêiner: O contêiner tem uma altura definida e
overflow: hidden, o que esconde qualquer conteúdo que ultrapasse sua altura; - Texto rolante (
.marquee): O texto é posicionado absolutamente, ocupando toda a largura do contêiner. A animação é aplicada, usando a propriedadeanimationcom duração de 10 segundos e repetição infinita; - Animação
@keyframes: A animação começa com o texto fora da tela na parte inferior (transform: translateY(100%)) e termina fora da tela na parte superior (transform: translateY(-100%)).
Resultado final
Quando você executar o código acima em um navegador, verá o texto rolando verticalmente de baixo para cima. Você pode ajustar a duração da animação, a altura do contêiner e o conteúdo do texto conforme desejado.
Personalizações adicionais
Você pode personalizar ainda mais o efeito de texto rolante vertical:
- Duração da animação: Ajuste a duração em
animation: marquee 10s linear infinite;para tornar o texto mais rápido ou mais lento; - Cores e estilos: Modifique as cores de fundo e do texto para se adequar ao seu design;
- Efeitos de pausa: Adicione
animation-play-state: paused;em uma interação de hover para pausar a animação quando o mouse estiver sobre o texto.
Outro exemplo prático
Com o CSS é possível aplicar efeitos de textos rolantes em determinadas áreas de sites nas quais textos rolam de baixo para cima, em determinada velocidade. Neste post veja textos rolantes verticalmente com CSS. Veja:
1. Crie o arquivo no qual terá o conteúdo a ser mostrado na área especial (arquivo-de-conteudos.php):
<style type="text/css">
body
{
background-color: transparent;
margin: 0;
padding: 0;
border: 0;
}
a:link {text-decoration: none;color: #000}
a:active {text-decoration: none;}
a:visited {text-decoration: none;color: #000}
a:hover {text-decoration: underline;color: #000}
/* FONT COLORS */
div{color: #000; font-family: Arial, Helvetica, sans-serif; size:12px; }
.title {color: #000; font: 12px Verdana, Geneva, sans-serif; font-weight: bold; }
#NewsDiv {position: absolute; left: 0; top: 0; width: auto; }
</style>
<script type="text/javascript">
<!-- HIDE CODE JAVASCRIPT NEWS SCROLLER ver 2.0 2013
var scrollspeed = 1; // SET SCROLLER SPEED 1 = SLOWEST
var speedjump = 20; // ADJUST SCROLL JUMPING = RANGE 20 TO 40
var startdelay = 0; // START SCROLLING DELAY IN SECONDS
var nextdelay = 0; // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST
var topspace = 0; // TOP SPACING FIRST TIME SCROLLING
var frameheight = 204; // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH
current = (scrollspeed);
function HeightData() {
AreaHeight = dataobj.offsetHeight;
if (AreaHeight === 0) {
setTimeout("HeightData()", (startdelay * 1000));
} else {
ScrollNewsDiv();
}
}
function NewsScrollStart() {
dataobj = document.all ? document.all.NewsDiv : document.getElementById("NewsDiv");
dataobj.style.top = topspace + 'px';
setTimeout("HeightData()", (startdelay * 1000));
}
function ScrollNewsDiv() {
dataobj.style.top = parseInt(dataobj.style.top) - scrollspeed + 'px';
if (parseInt(dataobj.style.top) < AreaHeight * (-1)) {
dataobj.style.top = frameheight + 'px';
setTimeout("ScrollNewsDiv()", (nextdelay * 1000));
} else {
setTimeout("ScrollNewsDiv()", speedjump);
}
}
// END HIDE CODE
Se preferir, crie um arquivo separado para armazenar os códigos CSS acima.
</script>
</head>
<body onMouseover="scrollspeed=0" onMouseout="scrollspeed=current"
OnLoad="NewsScrollStart();">
<div id="NewsDiv" style="text-align: left; padding: 5px;">
<center>
<font face="Arial, Helvetica, sans-serif" size="2">
<!-- SCROLLER CONTENT STARTS HERE -->
<span class="title">
Título 01</a>
</span>
<br />
<a href="link01.php">
Descrição do título.
</a>
<br /><br />
<span class="title">
Título 02</a>
</span>
<br />
<a href="link02.php">
Descrição do título.</a>
</a>
<br /><br />
<span class="title">
Título 03</a>
</span>
<br />
<a href="link03.php">
Descrição do título.
</a>
<br /><br />
<!-- SCROLLER CONTENT ENDS HERE -->
</font>
</center>
</div>2. Insira os códigos abaixo na área do site onde os textos rolantes serão mostrados:
<div style="width: 198px; border: none 1px solid; background-color: none; text-align: center;
padding: 0px 2px 7px 2px;">
<div style="color: #FFFFFF; font-family: Arial, sans-serif; font-weight: bold; text-align:
center; padding: 3px;">
</div>
<iframe id="NewsWindow" seamless src="arquivo-de-conteudos.php" width="198"
height="200" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"
style="display: block; margin: 0 auto; padding: 0; border: none;"></iframe>
</div>
//Determine o comprimento e altura da área onde os textos rolarão modificando os parâmetros
"width" e "height" do bloco de códigos acima.Criar textos rolantes verticalmente com CSS é uma ótima maneira de adicionar um elemento visual dinâmico a suas páginas web.
Usando as propriedades de animação do CSS, você pode fazer isso de forma acessível e eficaz, sem depender de tags obsoletas. Experimente diferentes estilos e animações para criar uma experiência de usuário envolvente e única!
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre como fazer textos rolantes verticalmente com CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários