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.Por Miguel Angel Alvarez - Tradução de JML
Publicado em: 08/8/07
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.