8 Exemplos de Animação de Efeito em HTML

É possível animar alguns textos com tipos especiais de formatação, sempre e diretamente no seu código.

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

Temos que pensar no resultado esperado e na conclusão com êxito da idealização do seu site, sempre se colocando no lugar de quem acessa e sente a satisfação em visualizar e sempre que tiver oportunidade, visitar novamente a página.

Blink

A 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 é: <blink>Texto que deve piscar</blink>

Novo!

Exemplo 1: 

Anota aí: <center><font color=#FFFF00><blink>Novo!</blink></font></center>

Exemplo 2: 

Anota aí: <font color=#00BFFF><b><blink>Novo!</b></blink></font>

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.

Marquee

Um 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 é: <marquee>Texto que deve se movimentar</marquee>.

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:

Exemplo 3: 

Anota aí: <span style="color: rgb(255, 0, 0);"><marquee behavior=scroll>Tô nem aí!</marquee></span>

Pode ser utilizada uma imagem:

Anota aí: <marquee behavior="alternate"><img src="image.gif"></marquee>

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

Outros exemplos:

Interferindo na direção:

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

<marquee behavior=slide direction=right>movimento para direita</marquee>

Exemplo 4: 

Anota aí: <marquee style="font-family: arial;" slide direction="right"><span style="color: rgb(255, 160, 120);">A gente somos in&uacute;til!</span></marquee>


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

<marquee behavior=slide direction=left>movimento para esquerda</marquee>

Exemplo 5: 

Anota aí: <marquee style="font-family: arial;" slide direction="left"><span style="color: rgb(0, 190, 255);">Indo para a sua esquerda<--<--<--...</span></marquee>


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.

Exemplo 6: 

Anota aí: </marquee><marquee scrolldelay="300"><img src="figura.gif"></marquee> 

Exemplo 7: 

Anota aí: <marquee scrollDelay=50><img src=" figura.gif "></marquee>

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

Anota aí: <marquee scrollDelay=150><font color=#00FF7F>Tomara que você volte depressa!</em></font></marquee>

Interferindo na 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 8: 

Anota aí: <marquee direction=up> <P align=”center”><center><font color=#7B68EE>Nosso texto subindo...</font></p></marquee>?