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>
<marquee>Texto exemplo</marquee>
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:
Antes:
<marquee>Texto exemplo</marquee><marquee direction="right">Texto exemplo</marquee>
<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>
<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.
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:
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.
Muito bom, obrigado!
ResponderEliminar