|
|
|
||||||||||||||||||||||
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
Parceiros - CSS para Web Design - S.O.S Designers - Slackware-Brasil - Crie seu Web site - Oficina da Net |
Animação DHTML de texto em uma camadaVeremos 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.
Autoria e outras referências sobre este artigo Dentro deste artigo: + 1 manual relacionado + 1 categoria relacionada
Manuais relacionados com este artigo Dentro de Workshop de Cross-Browser DHTML Seguinte: Animação DHTML de texto, 2ª Parte Anterior: Apresentação de slides DHTML Categorias relacionadas Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo: + Entrar em DHTMLComentários dos visitantes Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
|
| Sobre nós | Copyright | Anuncie | Entrar em contato | <criarweb> |