Animação HTML simples com marquee

Utilizamos a etiqueta marquee para realizar uma animação simples em uma página web. Como animar uma imagem ou fazer texto em movendo só com HTML.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 14/5/09
Valorize este artigo:
Este artigo serve para as pessoas que trabalham somente com HTML ao fazer páginas web e que querem incorporar um tipo simples de animação em seus sites. Uma solução fácil para fazer uma animação com HTML é fazer uso de Marquee. Há pouco tempo recebemos um e-mail de Carlos López Schmidt no qual nos sugeria um truque para animar imagens em páginas web utilizando marquee. Como não tínhamos nenhuma explicação sobre a etiqueta HTML <MARQUEE>, nos dedicamos a escrever este texto que dá algumas especificações e conselhos mais detalhados sobre a etiqueta. De qualquer forma, há que agradecer a Carlos a inspiração para escrever estas linhas.

<MARQUEE> é uma destas etiquetas não padronizadas de HTML, que suportam os navegadores mais comuns, porém que não estão compreendidas dentro das especificações de HTML. Serve para animar elementos dentro da página. Teoricamente. permite que o conteúdo que colocamos dentro da etiqueta, seja texto, fotografias, ou as duas coisas, se desloque horizontalmente pela página.

A etiqueta marquee pode nos servir para fazer animações em páginas simples, sem nenhum conhecimento de linguagens de programação nem de outras complicações semelhantes. Para os que só conhecem HTML é uma ferramenta perfeita se desejam fazer com que um elemento da página se mova.

Porém atenção, embora esteja comentando este truque para mover texto pela página ou imagens, temos que utilizar o marquee com muita prudência, visto que tem desvantagens:

  • Marquee não está compreendido nos padrões HTML.
  • Utilizar Marquee pode ter problemas de acessibilidade, ou seja, pode ser difícil de ler para determinadas pessoas com deficiências.
  • O fato de animar elementos de uma página favorece o dinamismo e ajuda a chamar atenção sobre determinadas mensagens ou imagens, porém, se utilizar marquee em muitos lugares pode provocar confusão e cansar o usuário.
Para utilizar marquee, simplesmente colocamos dentro da etiqueta os conteúdos que queremos que se movam, já sejam texto, imagens ou qualquer outro tipo de conteúdo. Algo como isto:

<marquee>texto que se move</marquee>

Porém, também poderíamos colocar algo como isto:

<marquee>
<table align="center" width="100"border="1">
<tr>
   <td>Esta tabela se desloca, com todo o conteúdo da tabela</td>
</tr>
</table>
</marquee>


Marquee suporta uma série de atributos para modificar seu comportamento ou seu aspecto. São os seguintes:

WIDTH
Largura do marquee. Se não marcamos altura, se colocará na seguinte linha, como em um parágrafo distinto. Se marcamos uma largura, a marquee tentará se mostrar na mesma linha onde a tivermos colocado. Se não houver espaço para ela se realizará a conseguinte quebra de linha para mostrá-la um pouco mais abaixo.

DIRECTION
Para onde queremos que se desloque o conteúdo do marquee. Os possíveis valores são "LEFT" e "RIGHT".

BEHAVIOR
É o comportamento do marquee, dentre os possíveis: SCROLL (o comportamento por padrão) indica que tem que fazer o deslocamento sempre em um mesmo endereço e ALTERNATE, que indica que o deslocamento se faz a um lado e ao outro de maneira alternada.

SCROLLDELAY
É o tempo em milésimos de segundos que tem que passar entre cada mudança da posição do que está se deslocando. Ou seja, quanto maior for o valor, mais milésimos de segundo demorará o marquee em se mover. O valor padrão é 85, porém, se por exemplo, colocarmos um valor 500 o marquee mudará de estado (deslocará o conteúdo) a cada meio segundo.

SCROLLAMOUNT
É a quantidade de pixel que tem que se deslocar o conteúdo do marquee cada vez que se move. Quanto maior scrollamount, mais se deslocará o marquee em cada movimento e portanto a animação será mais rápida. O valor padrão é 6. Podemos provar colocando um valor maior e veremos que o movimento será mais "a golpes".

LOOP
O número de ciclos que irá se mover o texto ou o que for que tiver dentro do marquee. Este atributo só funciona em Internet Explorer. Por padrão é INFINITE, que quer dizer que se deslocará todo o tempo sem parar. Porém, por exemplo se colocarmos um valor como 3, quer dizer que o marquee só realizará três ciclos ou movimentos e logo parará.

BGCOLOR
A cor de fundo do marquee. Aceita o nome de uma cor HTML ou de um valor RGB de tal cor.

HSPACE e VSPACE
Estes dois atributos servem para definir o número de pixel que deve aparecer entre o marquee e outros conteúdos da página, em horizontal e vertical.

Alguns exemplos de marquee:

<marquee width=200 direction=right>
Marquee à direita e com largura
</marquee>

<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se move</marquee>


Pode-se ver o exemplo em funcionamento em uma página à parte.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato