HTML

Efeitos animados

É possível animar alguns textos com tipos 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.

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: Acima foi utilizado: <center><blink>Novo!</blink></center>

Exemplo 2: Segue um código para a o texto aparecer em azul "Deep Sky Blue" e em negrito: <blink>Novo!</blink>

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:

Tô nem aí!
Exemplo 3: Acima foi utilizado: <marquee behavior=scroll>Tô nem aí!</marquee>

Pode ser utilizada uma imagem:

Acima foi utilizado: <marquee behavior="alternate"><img src="../fig/estrel01.gif"></marquee>

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.

<marquee behavior=slide direction=right>Elemento que se movimenta</marquee>

A gente somos inútil
Exemplo 5: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="right">A gente somos inútil!</marquee>

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

<marquee behavior=slide direction=left>Elemento que se movimenta</marquee>
Por isso corro demais: só pra te ver, meu bem!

Exemplo 6: Acima foi utilizado: <marquee style="font-family: arial;" slide direction="left">Por
isso corro demais: só pra te ver, meu bem!</marquee>

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: </marquee><marquee scrolldelay="300"><img src="../fig/estrel01.gif"></marquee>

Exemplo 8: Acima foi utilizado: <marquee scrollDelay=50><img src="../fig/estrel01.gif"></marquee>

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: <marquee scrollDelay=150>Tomara que você volte depressa!</marquee>

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: <marquee direction=up <center> Subindo!</marquee>

Onde obter mais informação

http://www.icmc.usp.br/ensino/material/html/blink.html

http://www.icmc.usp.br/ensino/material/html/marquee.html

Exercícios

10. No NVU

em uma página já criada, existente em A:/, incluir:

10.1. texto, com efeito blink

10.2. texto, com efeito marquee, da direita para a esquerda.

10.3. imagem, com efeito marquee, da esquerda para a direita, em outra velicidade.

Salvar em A:\htm10.html.

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.cultura.ufpa.br/dicas/htm/htm-efet.htm Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008