Efeito de digitação em texto com Javascript

Saca aquele efeitinho em textos que parece que se está digitando? Uma letra aparecendo após a outra.

Pois é. Precisei disso no módulo Mchat do Mwords daí tive que fazer hehe.

- Antes de chamar a função o elemento que vai receber a digitação deve estar vazio (sem texto).
- O "50" que tem lá dentro do setTimeout indica a velocidade da digitação. Quanto menor, mais rápido.
- Implementei um callback (parâmetro cb) pra que você possa definir alguma ação quando a digitação terminar.

Bora:

digita = function(obj,text,callback){ 
 /* faz efeito de digitação no texto. By Micox - elmicox.blogspot.com */
 obj = obj.nodeName ? obj : document.getElementById(obj);
 var len=obj.innerHTML.length;
 if(len<text.length){
  obj.innerHTML = text.substring(0,len+1)
  setTimeout(function(){digita(obj,text,callback)},50);
  if(len==text.length-1 && callback){ callback();}
 }
}

Pra usar:
- obj é o objeto que vai sofrer a digitação. Pode passar a ID do elemento ou o Objeto direto mesmo.
- text é o texto que vai aparecer
- callback é uma função opcional que vai ser executada quando acabar a digitação.

Exemplo:

<div id='cont'></div>
<script>
digita('cont','Opa, sou um texto que está sendo digitado',function(){alert('acabou a digitação')});
</script>

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.