Marquee: Textos, Símbolos e Imagens em Movimento

Hoje trouxe um tuto bem legal e super simples, com efeito que com certeza você já viu em muitos sites, inclusive os crédito vai pra Flashvars, para quem deseja deixar frases, links, imagens ou recadinhos em destaque, tipo lá no topo, em que as coisas ficam deslizando. Basta colar os códigos onde quiser que apareça o marquee.

Para isso vamos utilizar o que é conhecido em HTML como marquee. Usando a criatividade dá para criar lindos efeitos; quem entende de arquivos em flash, pode até criar lindos marquees, ou como vejo pela web, flashvars (marquee em flash).

O código básico de um marquee é mais ou menos assim:

Conteúdo
<span style="color: COR DA FONTE;"><marquee direction="DIREÇÃO" style="background: #PLANO DE FUNDO;">CONTEÚDO</marquee></span>

Agora é só substituir algumas coisinhas para ficar como a gente quiser:

- caso queiram pegar os códigos das cores, clique aqui;

- em direção você escolhe para que lado o conteúdo vai se movimentar, que pode ser para a direita (right), esquerda (left), para cima (up), para baixo (down), estilo vai-e-volta (alternate), e por aí vai;

- o plano de fundo pode ser imagem ou cor e o conteúdo pode conter imagens e textos.

Exemplos:

Marquee para a esquerda...
<span style="color: yellow;"><marquee direction="left" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...ou para a direita
<span style="color: yellow;"><marquee direction="right" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> Marquee para cima...
<span style="color: yellow;"><marquee direction="up" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...ou para baixo.
<span style="color: yellow;"><marquee direction="down" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span> ...Vai e vem ou vem e vai...
<span style="color: yellow;"><marquee behavior="alternate" style="background: #e47cbb;"><img src="URL DA IMAGEM">ESCREVA AQUI</marquee></span>

A direção "alternate" funciona um pouquinho diferente, conforme vocês devem ter visto. Agora é só ir adicionando algumas coisinhas, estilos e moldando seu marquee. No código há espaço para add imagens; colocando uma ao lado da outra fica muito lindinho também. Por exemplo, se quiser colocar uma lista de links, afiliados, sites, redes sociais...use este código:

<center><marquee direction="left" style="background: #ffffff; border: 1px solid #fcc;"><a href="URL DO LINK1"><img src="URL DA IMAGEM1" target="_blank" title="Título" /></a><a href="URL DO LINK2"><img src="URL DA IMAGEM2" target="_blank" title="Título" /></a><a href="URL DO LINK3"><img src="URL DA IMAGEM3" target="_blank" title="Título" /></a></marquee></span></center>



Créditos dos Flashvars