Simular texto escribiendose en tiempo real con jQuery

Crear un simulador de virus al estilo BAT ya es posible con un nuevo plugin de jQuery, ghostType es una mini librería Javascript programada por William Moynihan. GhostType simula el efecto de escritura de texto en tiempo real.
Con ghostType podrás asustar a tus visitantes con un virus (gusano) falso o desplegar un simple mensaje ante sus ojos como si estuvieras escribiéndolo en tiempo real, realmente siendo un texto animado. :)

Para proba un ejemplo, siga los siguientes pasos:

1. Añade la libreria jQuery antes de las etiqueta </head> de su documento html.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. Añade el código del plugin, ya sea en un archivo js separado o en el mismo documento html, justo antes del </head> :

<script>(function( $ ){
$.fn.ghostType = function() {
 return this.each(function() {
 var $this = $(this);
 var str = $this.text();
 $this.empty().show();
 str = str.split("");
 str.push("_");
 // increase the delay to ghostType slower
 var delay = 100;
 $.each(str, function (i, val) {
 if (val == "^") {
 // Do nothing. This will add to the delay.
 }
 else {
 $this.append('<span>' + val + '</span>');
 $this.children("span").hide().fadeIn(100).delay(delay * i);
 }
 });
 $this.children("span:last").css("textDecoration", "blink");
 });
 };
})( jQuery );</script>

3. Crea un div o cualquier otro elemento html con su respectivo ID y añade cualquier texto que desea mostrar:

<div id="ghostType">TENEMOS TODA TU BASE DE DATOS. ^^^^^^^^ ESTAS MUERTO.</div>

Finalmente mediante jQuery, seleccionamos al respectivo div  y ejecutamos  la función que simulará la escritura automática.

<script type="text/javascript">
 $(document).ready(function () {
 $("#ghostType").ghostType();
 });
</script>

Demo: http://ghosttype.com/


Mi nombre es Neysi, soy desarrollador web me gusta compartir algunas cosas de tecnología, programación y SEO. Si te gusta mi contenido puedes seguirme en las redes sociales como @neysitc.

Publicado 25/02/2012 Actualizado 25/02/2012 Categoria: Javascript, Programacion
Etiquetas: , , ,

ESCRIBE UN COMENTARIO