HTML COM ACESSIBILIDADE

Inserindo movimento aos elementos HTML

Podemos dar movimento a textos, links, imagens e a outros elementos HTML, colocando-os em evidência quando a situação for conveniente, pois conforme orientamos, não é recomendado o uso excessivo deste recurso. Para a realização desta tarefa, contamos com a tag <marquee>, que é reconhecida e executada somente pelo navegador Internet Explorer da Microsoft, sendo ignorada pelos demais navegadores.

A tag <marquee> é utilizada em par, possuindo abertura e fechamento. Na parte referente a sua abertura, inserimos diversos atributos que controlam características do seu funcionamento.

A declaração básica da tag <marquee> é:
<marquee> elemento </marquee>   

Vejamos agora, a descrição dos principais atributos da tag <marquee>:

(behavior)

Com este atributo, definimos o estilo de comportamento executado pela animação, podendo ser utilizado um entre os três valores disponíveis:

Behavior="scroll" - Este é o comportamento padrão utilizado pela tag <marquee>. Faz com que o elemento entre por um lado da tela e saia pelo outro, em um ciclo.

Behavior="slide" - Faz com que o elemento entre por um lado da tela e se desloque até o outro lado.

Behavior="alternate" - Faz com que o elemento se desloque de um lado para o outro da tela, em um ciclo.

(direction): Com este atributo, definimos para qual direção será movimentado o elemento:
Direction="left" - Da direita para a esquerda (direção padrão).
Direction="right" - Da esquerda para a direita.

(height): -Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão vertical que será reservada para a animação.

(width):Com este atributo, definimos em pixels ou em porcentagem da tela, a dimensão horizontal que será reservada para a animação.

(hspace): Com este atributo, podemos estabelecer uma margem horizontal externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado esquerdo como pelo lado direito.

(vspace): Com este atributo, podemos estabelecer uma margem vertical externa à área da animação, onde o valor definido em pixels será assumido tanto pelo lado superior como pelo lado inferior.

(align): Com este atributo, definimos o alinhamento vertical do elemento, dentro do espaço reservado para a animação. Podemos utilizar um entre os três valores:
Align="top" – Alinha à parte superior.
Align="middle" – Alinha ao centro (alinhamento padrão).
Align="bottom" – Alinha à parte inferior.

(bgcolor): Este atributo nos permite definir uma cor de fundo para a área reservada para a animação, utilizando o padrão RGB.

(loop): Com este atributo, podemos definir o ciclo de repetições que será aplicada a um comportamento estabelecido para a animação:

(Loop="3") – A animação executará o movimento estabelecido por três vezes.

Loop="infinite" – O ciclo de movimentos será executado ininterruptamente.

(crollamount): Este atributo nos permite definir em pixels, o espaço para cada movimento realizado pelo elemento na animação.

(scrolldelay): Este atributo nos permite definir o tempo em milisegundos, para cada movimento realizado pelo elemento na animação.

Note que com os atributos (scrollamount) e (scrolldelay), podemos modificar conforme a nossa preferência, a velocidade do deslocamento feito pelo elemento na animação, pois quanto maior for o espaço utilizado para cada movimento, maior será a velocidade e quanto maior for o tempo utilizado para cada movimento, menor será a velocidade.

Caso necessário, podemos combinar estas duas variáveis de modo a atingir a velocidade que desejamos.

Vejamos alguns exemplos da sua utilização:

1.

<center>
<marquee behavior="alternate"><font face="Comic Sans MS, verdana, helvetica, Sans-Serif" size="5" color="#ff0000">
<b>BEM-VINDO</b>
</font></marquee></center> Copiar

No exemplo acima, definimos que a mensagem de boas-vindas, ficará movimentando na tela horizontalmente de um lado para o outro. Perceba que complementamos a animação, definindo uma formatação para a fonte da mensagem exibida.

2. 

<table border="0" cellspacing="0" cellpadding="0" height="70" width="95%"><tr><td>
<marquee behavior="slide" direction="right" height="60" width="95%" hspace="5" vspace="5">
<img src="foto.jpg" align="right" alt="descrição da foto" height="60" width="80">
</marquee></td></tr></table> Copiar

No exemplo anterior, definimos que a imagem será deslocada do lado esquerdo para o lado direito, percorrendo 95% da dimensão horizontal da janela do navegador. Caso o navegador não suporte o uso de animações com o elemento marquee, por precaução, inserimos a imagem em uma tabela com 95% de largura em relação a janela e com o alinhamento à direita, garantindo o posicionamento final idealizado para a imagem.

3. 

<center>
<marquee loop="5">
<font face="Comic Sans MS, verdana, helvetica, Sans-Serif" size="5" color="#ff0000">
<b> BEM-VINDO </b> </font> <br>   
<img src="foto.jpg" align="center" alt="descrição da foto" height="60" width="80">
</marquee>
</center> Copiar

No exemplo acima, utilizamos o comportamento "scroll" que é o padrão do elemento marquee, para que a mensagem de boas-vindas e a fotografia rolem horizontalmente da direita para a esquerda (direção padrão) por cinco vezes consecutivas. Caso o navegador não seja o Internet Explorer da Microsoft, a mensagem aparecerá sobre a fotografia e ambos alinhados ao centro.