Crear texto con efecto de mecanografía

Texto con efecto mecanografia

Bueno hoy les presentaré un script elaborado en JavaScript que muestra disntintos mensajes con un efecto de mecanografia. El efecto es muy agradable y es muy sencillo de implementarlo.

Mostrar Texto Plano

JavaScript:

<script language="JavaScript1.2"><!--
var line=new Array() line[1]="www.aborregate.com" line[2]="Te ayudamos con tus páginas Web o con tu blog.." line[3]="códigos, efectos, consejos, trucos, plantillas, scripts..." line[4]="todo lo que necesitas lo tenemos aquí..." line[5]="ven y compruébalo." line[6]="..."
//Especifica el tamaño de la fuente var ts_fontsize="12px"
//No editar esta parte del script
var longestmessage=1 for (i=2;i
<line.length;i++){ if (line[i].length>line[longestmessage].length) longestmessage=i }
var tscroller_width=line[longestmessage].length
lines=line.length-1 //Numero de lineas
//if IE 4+ or NS6 if (document.all||document.getElementById){ document.write(\' <form name="bannerform">\') document.write(\' <input type="text" name="banner" size="\'+tscroller_width+\'"\') document.write(\' style="background-color: \'+document.bgColor+\'; color: \'+document.body.text+\'; font-family: verdana; font-size: \'+ts_fontsize+\'; font-weight:bold; border: medium none" onfocus="blur()">\') document.write(\'</form>\') }
temp="" nextchar=-1; nextline=1; cursor="]" function animate(){ if (temp==line[nextline] & temp.length==line[nextline].length & nextline!=lines){ nextline++; nextchar=-1; document.bannerform.banner.value=temp; temp=""; setTimeout("nextstep()",3000)} else if (nextline==lines & temp==line[nextline] & temp.length==line[nextline].length){ nextline=1; nextchar=-1; document.bannerform.banner.value=temp; temp=""; setTimeout("nextstep()",1000)} else{ nextstep()}}
function nextstep(){
if (cursor=="\\"){ cursor="|"} else if (cursor=="|"){ cursor="/"} else if (cursor=="/"){ cursor="-"} else if (cursor=="-"){ cursor="\\"}
nextchar++; temp+=line[nextline].charAt(nextchar); document.bannerform.banner.value=temp+cursor setTimeout("animate()",25)}
//if IE 4+ or NS6 if (document.all||document.getElementById) window.onload=animate // --></script>

A continuacion, describimos las partes que puedes modificar del script. Entre lo que puedescambiar estan el texto de los parrafos el tamaño de la fuente, el cursor, la velocidad y el tiempo de exposicion.

Texto:

Puedes modificar lo que se encuentra dentro de las comillas.