Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Efeito em HTML, < marquee >: Fazendo um texto rolar na tela

Como o curso HTML Progressivo visa ensinar tudo sobre HTML, vamos sempre, ao longo de nossa apostila online de HTML, mostrar alguns efeitos e truques bacanas do HTML, que saem um pouco do escopo sério e teórico do aprendizado de HTML.

Nesse simples tutorial, vamos mostrar como fazer o seguinte efeito:
Texto rolando na tela



Curso de HTML e CSS com certificado
Obter meu certificado!

Como fazer um texto rolar na tela: <marquee>

Neste pequeno tutorial, vamos ensinar a fazer um efeito bem interessante HTML.
Com certeza você já deve ter visto em vários sites, textos deslizando pela tela, piscando, chamando sua atenção dentre outras firulas.

Há várias maneiras de fazer isso, alterar a velocidade, colocar pra rolar pra cima, pra baixar, piscar dentre outras coisas.
Vamos ensinar uma versão simples, que simplesmente faz o texto deslize da direita para a esquerda.
Para fazer isto, basta colocar o texto que você quer ver deslizando entre as tags <marquee> </marquee>, e nada mais.

Ou seja, uma página em HTML, com os conhecimentos que obtivemos até aqui, ficaria assim:

<!DOCTYPE html>
 
<html>
<marquee> Seja bem-vindo ao curso HTML Progressivo - Apostila completa, online e grátis de HTML <br></marquee>
Estou aprendendo a criar sites!<br>
Tudo isso graças ao site HTML Progressivo!
</html>


O efeito é o seguinte:

Seja bem-vindo ao curso HTML Progressivo - Apostila completa, online e grátis de HTML Estou aprendendo a criar sites!
Tudo isso graças ao site HTML Progressivo!


Exercício: Hackear e descobrir códigos
Boa parte do aprendizado de um Webmaster é a análise e estudo do código dos outros.

Isso é hackear: buscar informações, tentar sempre aprender e descobrir novos conhecimentos (não confunda com cracker, que é aquele que rouba e destrói...esse não é o objetivo de nosso curso).

Então, veja os seguintes efeitos e tente descobrir o código que faz eles.
Dica: analise o código fonte da página e busque pela tag que você aprendeu aqui nesse tutorial

Efeito bate e volta:

Estou batendo e voltando...

Ao contrário:

Tô na contra-mão! Agora pra cima: Olha mãe, to subindo!


Os efeitos acima são do comando <marquee></marquee>, porém demos comandos mais específicos a essa tag, que são os atributos, assunto de nosso próximo tutorial de HTML do curso HTML Progressivo: como criar sites.

10 comentários:

Unknown disse...

Muito prático e de fácil aprendizado.

Unknown disse...

Estou utilizando. É muito prática.

Ricardo Castro disse...

Joia.

[C0D3]S!gm@~ disse...

^^
"Código-Fonte" > Ctrl+F > marquee > próximo, próximo, próximo kkkkkkk
Entendeu né? :) Rs.

Unknown disse...

Muito bom!!

Anônimo disse...

Tô na contra-mão!
Estou batendo e voltando...

Guilherme H disse...

Como faz para definir um tempo? Tipo de quanto em quanto ele faz isso etc

CRUZ disse...

Hey, não sei se respondem ainda, mas... Quando eu não coloco o código
que quebra linhas o não funciona. Precisa do
?



(CURSO MUITO BOM, PARABÉNS!) Tenho 14 anos e estou adorando.

Anônimo disse...

Passei semanas procurando isso rs. Valeu, foi de boa ajuda.
Apliquei no meu blog
programacaosemfrescura.blogspot.com

Anônimo disse...

Top!! Mas estou buscando fazer isso dentro do wordpress no elementor pro, alguém sabe como fazer essa rolagem de texto por lá?

Tutoriais de HTML e CSS