loading...





Texto animado em Html sem recorrer a imagens Gif, a Javascript ou Flash.



Texto para demonstrar o efeito.
Texto para demonstração o efeito.
Texto para demonstrar o efeito.
Texto para demonstrar o efeito.
Texto para demonstrar o efeito.


Para criar este efeito temos que recorrer a tag "marquee" esta como todas as tags é formada por duas tags, tag de abertura, e tag de fecho, e entre as 2 tags, coloca-se o texto que queremos;

<tag> O texto </tag>

Este é um exemplo muito simples apenas para poder aprender como funciona, o código real para o efeito é mais parecido com o próximo;

<marquee>Texto exemplo</marquee>

Se adicionar este código assim no seu blogue ou site, ele vai gerar uma deslizamento normal, com a fonte e o tamanho do texto padrão do seu blogue/site e com o fundo branco.

Mas o que fazer se quisermos mudar a direcção, acrescentar cor de fundo, mudar a velocidade do texto (ScrollAmount) ou alterar a altura e a largura?

É muito fácil!

Podemos controlar a direcção, cor de fundo, ScrollAmount ou qualquer outra coisa com códigos que colocamos na tag de abertura.

Veja o seguinte código:

direction="right"

Trata-se de um código para fazer o texto ir na direcção: Righ.
Não se esqueça que os códigos são sempre em inglês.

Por isso, se queremos que o nosso scrolling do texto se move para a direita, vamos adicionar o valor correto na tag de abertura.

Antes:
<marquee>Texto exemplo</marquee>

Depois:
<marquee direction="right">Texto exemplo</marquee>


Como vê foi adicionado o valor na tag de abertura após a palavra marquee, podemos simplesmente adicionar mais do que um valor ao nosso texto na "tag de abertura". Como o próximo exemplo:

<marquee bgcolor="#FF00FF"  direction="right">Texto exemplo</marquee>

Como as opções são muitas deixo abaixo uma lista que irá mostrar-vos todos os valores que podem utilizar.


Valor
Efeito
direction="left" Faz o texto mover-se para a esquerda
direction="right" Faz o texto mover-se para a direita
direction="up" Faz o texto mover-se para cima
direction="down" Faz o texto mover-se para baixo
behavior="alternate" Faz o texto ir para a direita e quando chegar ao final da sua caixa de marcação voltar para a esquerda
behavior="slide" Faz o texto parar quando ele chegar ao fim da caixa de marcação
loop="4" Se precisar controlar o tempo que o texto vai ser exibido. adicione esse valor e mude o número 4 pelo número que quiser.
scrollamount="2" Define a velocidade do texto, 1 e 2 é lento 3, 4, 5 é mais rápido, quanto mais aumentar este número, mais rápido o texto vai ser.
width="400" Controla o seu texto na largura
height="66" Controla a altura do texto
onmouseover="this.stop()" onmouseout="this.start()" Faz a texto parar quando o seu rato estiver sobre o texto.
bgcolor="#9999CC" Cor do fundo. Pode-se alterar a cor alterando o código #9999CC.
style="color: #FF0000" Cor do texto. Pode-se alterar a cor alterando o código #FF0000.
style="font-size: 1em" Tamanho do Texto. Pode-se alterar mudando o número.
style="font-family: Tahoma" Estilo da fonte do texto. Pode-se alterar alterando o nome da fonte.
style="font-size: 12pt; color:#800000; font-family: Tahoma" Para mudar a cor do texto, o tamanho e o estilo ao mesmo tempo, pode mesclar os valores como o exemplo.


Se quiser adicionar links ao seu texto, vai precisar alterar o texto entre a tag de abertura e tag de fecho, e inserir o seguinte código.
<a href="Link URL">Texto para link</a>

Finalmente, deixo a demonstração de uma caixa de texto personalizada, e o código para ajudá-lo.


O código.

<marquee bgcolor="#4B5C67" direction="Up" height="66" scrollamount="2" style="color: #666; font-family: Areal; font-size: 14pt; color: #fff;" width="50%" >Texto para demonstração.</marquee>

O resultado:
Texto para demonstração.


Como Colocar o Código: - No Caso de ser no Blogger

Passo 1 - Abrir o painel principal do blogger.
Passo 2 - Seleccione o separador Design e Elementos de Página, e Adicionar uma Miniaplicação e escolher HTML / JavaScript.
Passo 3 - Na área do conteúdo, cole o código.
Passo 4 - Clique em Salvar.
Passo 5 - Verificar se está tudo bem, caso exista algum problema verifique se efectuou tudo bem, repita os passos caso necessário.


Colocar o Código Gerado: - No Caso de ser num Web Site

Passo 1 - Editar o Html do website
Passo 2 - Procurar pelo local onde quer este testo.
Passo 3 - Colar o código nesse local.
Passo 4 - Clique em Salvar.
Passo 5 - Verificar se está tudo bem, caso exista algum problema verifique se efectou tudo bem, repita os passos caso necessário.






1 comentários :

Enviar um comentário