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/

Se el primero en dejar un comentario.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*

*

*