Animação DHTML de texto em uma camada

Veremos um exemplo de DHTML compatível com todos os navegadores para fazer uma animação de um texto que se vai escrendo letra a letra.

Vamos ver um exemplo de script em Javascript que nos servirá para fazer uma simples animação de texto em uma camada, baseada em escrever uma frase letra a letra.

O script faz uso das bibliotecas X-Library, que ofeferem um jogo de funções para trabalho com camadas Cross Browser, ou seja, compatíveis com todos os navegadores. Podemos ver mais informações sobre isto em nosso manual Cross-Browser

O exemplo é bastante simples. Não obstante, seria interessante vê-lo em funcionamento para termos uma idéia exata de nosso objetivo neste artigo.

A camada com o texto para animar

O texto que vai se mover, deve ser colocado em uma camada independente. À princípio, haverá um texto vazio na camada, porque não há nada para mostrar. O código da camada será o seguinte:

< div id="textomovimento" style="font-size:14pt;">
</div>

Simplesmente, associamos a camada a um identificador para referirmos a ela desde nossos scripts DHTML.

Script para fazer a animação passo a passo

Podemos separar em duas partes as tarefas necessárias para dar vida ao texto. Uma na qual se obtém um texto letra a letra e outra na qual se escreve esse texto em uma camada.

Para obter um texto letra a letra e realizar o loop para que se mostre o texto pouco a pouco, utilizamos a técnica parecida a que explicamos no artigo Texto em movimento na barra de estado, por isso, pode ser uma boa idéia dar uma olhada antes nesse artigo.

O script para obter um texto

Definitivamente, o que se faz é criar uma variável com o texto a mostrar e outra que salva a posição sobre a que estamos situados dentro da cadeia de texto a animar. Em cada passo da animação se incrementará essa posição, de modo que o texto a mostrar será cada vez maior.

As duas variáveis com o texto e a posição se definem de maneira global, para que estejam disponíveis em qualquer site e seus valores não se percam entre as diferentes execuções da função:

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

Para conhecer a porção de texto a mostrar em cada momento se definiu uma função Javascript que devolve o texto atual. Esta função também se encarrega de incrementar a variável "pos" (que salava a posição atual) em cada execução da função. Quando "pos" chega ao final do texto, volta-se ao princípio atribuindo o valor zero.

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, voltaremos a posicao do pincipio
      pos = 0
      return texto
   }else{
   return texto.substring(0,pos)
  }
}

Função xInnerHtml()

Esta função está definida nas bibliotecas X-Library e serve para modificar o código HTML que há dentro de uma camada. Simplesmente recebe a camada a substituir seu código HTML e o novo código em um string.

Utilizaremos esta função para ir modificando o texto da camada em cada momento e desse modo, ir gerando a animação de texto.

Função que gera a animação

Para gerar um movimento no texto vamos utilizar uma função que se encarrega de modificar o texto da camada e de chamar a si mesma passados uns instantes. Através das distintas chamadas à função e modificando o texto a mostrar é como se cria o efeito de movimento do texto.

A função é extremamente simploes, simplesmente modifica o texto da camada com a função xInnerHtml(). Para extrair o texto em cada momento simplesmente chama à função dame_texto() explicada anteriormente.

Para fazer o atraso entre as diferentes chamadas à função se utiliza o método setTimeout() de Javascript, que recebe a instrução a executar e o tempo em milésimos de segundos que deve esperar para executar a instrução. A instrução em si é a chamada à mesma função anima_texto(). Com as distintas chamadas a esta função é como se gera a animação.

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

Código completo

Para ver o exemplo completo incluímos a seguir todo seu código:

<html>

<head>     <title>Criar uma animacao 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-vindos a minha pagina 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 chegarmos ao final, voltaremos a posicao do principio
      pos = 0
      return texto
   }else{
   return texto.substring(0,pos)
  }
}

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

</script>

</head>

<body onload="anima_texto()">

<div id="textomovimento" style="font-size:14pt;">
</div>

</body>
</html>

Podemos ver o exemplo em movimento em uma página a parte.