Animação DHTML de texto, 2ª Parte

Complicamos um pouco a animação de texto com Javascript e camadas, jogando com as cores.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 20/8/07
Valorize este artigo:
O objetivo deste workshop consiste em modificar um pouco o exemplo relatado no artigo Animação DHTML de texto em uma camada, que faça nossa animação um pouco mais complexa, utilizando um pouco de cor.

No exemplo anterior simplesmente tínhamos feito um script para mostrar um texto letra a letra. Neste artigo vamos jogar com as cores, para fazer dois efeitos diferentes.

Texto que muda de cor letra a letra

O primeiro exemplo que vamos ver é um texto que muda de cor letra a letra. O título da página vai estar sempre escrito e o que faremos é escrever encima em cor vermelha. Deste modo parece como se o texto mudasse de cor letra a letra.

Para entender qual é o efeito buscado, vale a pena ver o exemplo em funcionamento.

O exemplo poderia ter sido feito de várias maneiras. Nós escolhemos criar duas camadas, que posicionamos no mesmo lugar. Uma das camadas tem o texto fixo escrito nela e a outra utilizaremos para escrever o texto letra a letra. O código HTML das camadas tem esta forma:

<div id="textofundo" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
Bem-vindos a minha página web!!!
</div>
<div id="textomovimento" style="color: #cc0000; font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>


Observamos que a camada com id "textofundo" contém o texto da mensagem. Por outro lado, a camada com id "textomovimento" é onde vamos ir escrevendo o texto letra a letra. À princípio está vazia e tem definido como cor do texto o valor #cc0000.

O código Javascript para escrever a camada é exatamente o mesmo que no artigo anterior:

//variavel com o texto a mostrar
var texto = "Bem-vindos a minha página web!!!"
//variavel com a posicao no texto. Iniciar sempre a 0
var pos = 0

function dame_texto(){
    //incremento a posicao em 1 e extraio o texto a mostrar neste momento.
    pos = pos + 1
    if (pos == texto.length){
     //se chegamos ao final, voltamos aposicao ao principio
     pos = 0
     return texto
   }else{
    return texto.substring(0,pos)
   }
}

function anima_texto(){
    xInnerHtml('textomovimento',dame_texto())
    setTimeout("anima_texto()",100)
}

Pode-se ver o exemplo em funcionamento em uma página a parte.

Exemplo 2 animação com mudança de cor

Para complicar um pouco mais o exercício vamos fazer um efeito de texto em movimento onde mude a cor das letras cada vez que se escreva o texto animado. Podemos ver o exemplo em funcionamento em uma página a parte

O exercício é parecido ao relatado no artigo Animação DHTML de texto em uma camada , o único é que cada vez que se começa a escrever o texto, se define sua cor.

A camada onde mostraremos o efeito de animação de texto é a seguinte:

<div id="textomovimento" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>


Agora, o código javascript será como segue:

Definem-se umas variáveis globais, assim como antes, embora agora também armazenamos a variável "minhacor", que conterá a cor com a qual se deva escrever o texto cada vez.

//variavel com o texto a mostrar
var texto = "Bem-vindos a minha pagina web!!!"
//variavel com a posição no texto. Iniciar sempre a 0
var pos = 0
//variavel para armazenar a cor atual
var minhacor = dame_cor_aleatoria()


Se observarmos, ao declarar a variável "minhacor" também se inicia seu conteúdo, fazendo uma chamada à função dame_cor_aleatoria(), que devolve uma cor escolhida aleatoriamente.

Também muda a função anima_texto(), que agora deve escrever a cor do texto a colocar na camada. Obviamente, utilizará a variável "minhacor", que é a que tem a cor que se deseja utilizar.

function anima_texto(){
   xInnerHtml('textomovimento','<font color=' + minhacolor + '>' + dame_texto() + '</font>')
   setTimeout("anima_texto()",100)
}


Por último, veremos as mudanças na função dame_texto(), que devolve o texto que se tem que escrever em cada momento na página. Neste caso, quando se chega ao final do texto a escrever, que antes simplesmente colocávamos a zero o contador "pos", agora também vamos mudar a cor armazenada na variável "minhacor", fazendo uma chamada à função dame_cor_aleatoria().

O resto do exercício é parecido ao que já foi visto para outros exemplos. Não obstante, o escrevemos a seguir para que se possa ver por completo.

<html>
<head>
    <title>Criar uma animação de texto sobre uma camada</title>

<script type='text/javascript' src='../x/x_core.js'></script>
<script>

//variavel com o texto a mostrar
var texto = "Bem-vido a minha página web!!!"
//variavel com a posicao no texto. Iniciar sempre a 0
var pos = 0
//variavel para armazenar a cor atual
var minhacor = dame_cor_aleatoria()

function dame_texto(){
   //incremento a posicao em 1 e extraio o texto a mostrar neste momento.
   pos = pos + 1
if (pos == texto.length){
      //se chegarmos ao final, voltamos aposicao ao principio
      pos = 0
      minhacor = dame_cor_aleatoria()
      return texto
   }else{
      return texto.substring(0,pos)
   }
}

function anima_texto(){
    xInnerHtml('textomovimento','<font color=' + minhacor + '>' + dame_texto() + '</font>')
    setTimeout("anima_texto()",100)
}

function aleatorio(inferior,superior){
    numPossibilidades = superior - inferior
    aleat = Math.random() * numPossibilidades
    aleat = Math.floor(aleat)
    return parseInt(inferior) + aleat
}

function dame_cor_aleatoria(){
    hexadecimal = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
    cor_aleatoria = "#";
    for (i=0;i<6;i++){
      posarray = aleatoria(0,hexadecimal.length)
      cor_aleatoria += hexadecimal[posarray]
    }
   return cor_aleatoria
}

</script>

</head>

<body onload="anima_texto()">

<div id="textomovimento" style="font-size:16pt; font-weight:bold; position:absolute; top:12px; left:50px;">
</div>

</body>
</html>


Para finalizar, podemos ver o exemplo em funcionamento em uma página a parte.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato