Efeitos animados
Autor: TUDO DE BLOG | Publicado: 2010-07-11T15:42:00-03:00

Efeitos animadosÉ possível animar alguns textos com efeitos especiais de formatação, sempre diretamente no código fonte.

É importante notar que recursos de animação devem ser utilizados com cuidado e parcimônia, pois em uma página que já apresenta vários motivos que chamam a atenção do leitor (figuras, cores, fontes) os efeitos animados são mais um deles, e seu uso pode ocasionar um resultado final cansativo e confuso. 

BlinkA formatação Blink permite que um certo texto fique piscando em uma página, como no exemplo abaixo, centralizado e em amarelo. Pode-se aplicar outros formatos como cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.

O código é: &lt;blink&gt;Texto que deve piscar&lt;/blink&gt;





Novo!  
Exemplo 1: Acima foi utilizado: 

&lt;center&gt;&lt;font
color=#FFFF00&gt;&lt;blink&gt;Novo!&lt;/blink&gt;&lt;/font&gt;&lt;/center&gt;

Exemplo 2: Segue um código para a o texto aparecer em azul "Deep Sky Blue" e em negrito:  &lt;font
color=#00BFFF&gt;&lt;b&gt;&lt;blink&gt;Novo!&lt;/b&gt;&lt;/blink&gt;&lt;/font&gt;

Novo! 

É recomendável que o comando blink seja usado somente em pequenos detalhes (palavras ou setas), mas não em grande número na mesma página, pois gera muito cansaço visual.

Deve-se ressaltar que nem todos os navegadores mostram o efeito dessa formatação.
MarqueeUm texto pode entrar na página e percorrê-la da direita para a esquerda ou em sentido contrário, como um letreiro. Isso é obtido usando-se a formatação Marquee.

O código é: &lt;marquee&gt;Texto que deve se movimentar&lt;/marquee&gt;.

Esse comando admite atributos de direção e largura do efeito as quais possibilitam várias formas de apresentação.

Também pode-se aplicar cores, negrito, italic e alterar a fonte e o seu tamanho, normalmente.

O deslocamento pode ser só da direita para a esquerda:

 Tô nem aí!  
Exemplo 3: Acima foi utilizado: Tô nem aí!

Pode ser utilizada uma imagem:






  
Acima foi utilizado: 

O atributo behavior="alternate" faz com que o elemento movimentado vá e volte.

Exemplo 4: Veja um exemplo de uso do tag Marquee com uma foto grande, clicando aqui.
Outros exemplos:1. Interferindo na direção:

a.  Da esquerda para a direita. O atributo slide direction="right" faz com que o elemento siga para a direita.

Elemento que se movimenta


A gente somos inútil  
Exemplo 5: Acima foi utilizado: A gente somos inútil!


b. Da direita para a esquerda. O atributo slide direction="left" faz com que o elemento siga para a esquerda.

Elemento que se movimenta
Por isso corro demais: só pra te ver, meu bem!  

Exemplo 6: Acima foi utilizado: Por
isso corro demais: só pra te ver, meu bem!


2. Interferindo na velocidade:

A especificação scrollDelay=um número indica a velocidade da rolagem: quanto menor for o número, mais rapidamente o texto corre. Exemplos:
  
Exemplo 7:  Acima foi utilizado: 
   
Exemplo 8:  Acima foi utilizado: 

Se o que vai se movimentar é um texto evidentemente ele pode ser formado: Cor, tipo e tamanhos de fonte etc. 

 Tomara que você volte depressa!  
Acima foi utilizado: Tomara que você volte depressa!

3. Interferindo no sentido: 

A especificação direction=up faz com que o texto fique na vertical. Nesse caso foi também centralizado e aparece na cor lilás (MediumSlateBlue). Exemplo:   






 Subindo!    
Exemplo 9:  Acima foi utilizado: 











 Subindo!
Fonte: Efeitos Animados