Efeito de movimento com marquee
Autor: Maik Basso | Publicado: 2012-03-08T12:57:00-03:00




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:

&lt;marquee&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Aqui vai o conteúdo que ficará em movimento! 
&lt;/marquee&gt;


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:


     alternate:  O conteúdo vai de um lado para outro e assim sucessivamente.
        Exemplo:

        
&lt;marquee behavior="alternate"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        


     slide:  O conteúdo sai de um lado, pré-definido ou não, e para outro.
        Exemplo:

        
&lt;marquee behavior="slide"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        


     scroll:  O conteúdo fica deslizando sempre no mesmo sentido.
        Exemplo:

        
&lt;marquee behavior="slide"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        



scrollamount
Comando que permite o controle da velocidade do conteúdo em movimento. Aceita como valor números maiores que zero.
Exemplo:

&lt;marquee scrollamount="10"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;


direction
Indica para qual direção o conteúdo deve deslizar. Seus possíveis valores são:


     down:  O conteúdo desliza de cima para baixo.
        Exemplo:

        
&lt;marquee direction="down"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        


     left:  O conteúdo desliza da direita para a esquerda.
        Exemplo:

        
&lt;marquee direction="left"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        


     right:  O conteúdo desliza da esquerda para a direita.
        Exemplo:

        
&lt;marquee direction="right"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        


     up:  O conteúdo desliza de baixo para cima.
        Exemplo:

        
&lt;marquee direction="up"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Conteúdo em movimento! 
&lt;/marquee&gt;
        



Slides
Utilizando marquee e um pouco de CSS é possível criar slides mais simples, mas não menos funcionais, para sites e blogs.
Exemplo:

&lt;marquee behavior="scroll" scrollamount="10" direction="left"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;img src="link_da_imagem"&gt;&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;img src="link_da_imagem"&gt;&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;img src="link_da_imagem"&gt;&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;img src="link_da_imagem"&gt;&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;&lt;img src="link_da_imagem"&gt;&lt;/a&gt; 
&lt;/marquee&gt;

Agora que você já tem o HTML, utilize os seus conhecimentos de CSS e crie um belo slide.