Efeito de movimento com marquee

Um efeito muito interessante no HTML é a possibilidade de colocar elementos, imagens e textos em movimento, utilizando uma simples tag e alguns comandos.
A tag que tem a função de colocar movimento no HTML é a tag marquee.
Exemplo:
<marquee>
      Aqui vai o conteúdo que ficará em movimento!
</marquee>

Comandos

Alguns comandos de controle podem ser aplicados a tag marquee para melhorar o efeito. São eles:
behavior
Este comando possibilita o controle do efeito de movimento. Seus possíveis valores são:
  1. alternate: O conteúdo vai de um lado para outro e assim sucessivamente. Exemplo:
    <marquee behavior="alternate">
          Conteúdo em movimento!
    </marquee>
  2. slide: O conteúdo sai de um lado, pré-definido ou não, e para outro. Exemplo:
    <marquee behavior="slide">
          Conteúdo em movimento!
    </marquee>
  3. scroll: O conteúdo fica deslizando sempre no mesmo sentido. Exemplo:
    <marquee behavior="slide">
          Conteúdo em movimento!
    </marquee>
scrollamount
Comando que permite o controle da velocidade do conteúdo em movimento. Aceita como valor números maiores que zero.
Exemplo:
<marquee scrollamount="10">
      Conteúdo em movimento!
</marquee>
direction
Indica para qual direção o conteúdo deve deslizar. Seus possíveis valores são:
  1. down: O conteúdo desliza de cima para baixo. Exemplo:
    <marquee direction="down">
          Conteúdo em movimento!
    </marquee>
  2. left: O conteúdo desliza da direita para a esquerda. Exemplo:
    <marquee direction="left">
          Conteúdo em movimento!
    </marquee>
  3. right: O conteúdo desliza da esquerda para a direita. Exemplo:
    <marquee direction="right">
          Conteúdo em movimento!
    </marquee>
  4. up: O conteúdo desliza de baixo para cima. Exemplo:
    <marquee direction="up">
          Conteúdo em movimento!
    </marquee>

Slides

Utilizando marquee e um pouco de CSS é possível criar slides mais simples, mas não menos funcionais, para sites e blogs.
Exemplo:
<marquee behavior="scroll" scrollamount="10" direction="left">
      <a href="#"><img src="link_da_imagem"></a>
      <a href="#"><img src="link_da_imagem"></a>
      <a href="#"><img src="link_da_imagem"></a>
      <a href="#"><img src="link_da_imagem"></a>
      <a href="#"><img src="link_da_imagem"></a>
</marquee>
Agora que você já tem o HTML, utilize os seus conhecimentos de CSS e crie um belo slide.



Postagens relacionadas:

22 comentários:

Auto Escola Cariri Oeste disse...

muito bom

Anônimo disse...

Excelente, Um básico mas muita gente deixa passar...

Unknown disse...

Muito bom mesmo seu contéudo, porém queria um que fosse para o lado esquerdo e volta-se para o lado direito, sem para. Obrigado.

Unknown disse...

Muito obrigada! Eu que sou leiga consegui fazer uma banner mais chic. Parece até coisa de profissional. Muito Obrigada mesmo!

Unknown disse...

beleza

Unknown disse...

OLA,TEM COMO PASSAR UMA FOTO POR VAZ,NESSE SLIDE QUE VC POSTOU,OBR.

Maik Basso disse...

Sim, é só definir o tamanho do slide para o tamanho de uma foto só.

Sidney Reis disse...

Maik, parabéns, excelente site!

Unknown disse...

Valeu pela dica...

Pr Flávio da Cunha Guimarães disse...

Gostei, já estou usando as dicas, parabéns por compartilhar os seus conhecimentos e ajudar os que menso tem.

Unknown disse...

fera demais seus conteúdos, muito fáceis de aprender.
PARABÉNS

Unknown disse...

fera demais seus conteúdos, muito fáceis de aprender.
PARABÉNS

99217983 disse...

Excelente suas explicações. Direto sem rodeio. Está sendo muito útil no meu aprendizado..

Anônimo disse...

obrigado

Anônimo disse...

GOOd

ROSE disse...

Parabéns...
Pelo conteúdo.

Unknown disse...

Congratulations.. excelent!

NE71NHO disse...

MUITO OBRIGADO CARA!S2

NE71NHO disse...

Muito Obrigado cara!

Anônimo disse...

Esta função não funciona para celular?

Anônimo disse...

Meu Bravo!!!❤👏👏👏👏👏

Gilberto Prado disse...

Muito bom!

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.