jueves, 23 de febrero de 2012

Textualizer: Efectos en textos con jQuery

Textualizer es un plugin para jQuery con el que se pueden generar transiciones entre distintos textos de manera bastante extraña, cambiando las letras de lugar con efectos diversos.

Su uso es muy sencillo, basta agregar el script que puede descargarse desde la página del autor ya sea en su versión minimizada como completa y agregarlo antes de </head>

Luego, para usarlo debemos agregar un contenedor al que identificamos mediante su ID, allí donde quisiéramos que se mostrara; por ejemplo:
<div id="demo"></div>
y llamamos a la función con las opciones que se nos ocurran:
<script>
var list = [un txto', 'otro texto, 'último texto']; // la lista de textos a mostrar
var txt = $('#demo'); // el ID del contenedor
var options = {
duration: 1000, // el tiempo que el texto permanecerá visible
rearrangeDuration: 1000, // ella duración del efecto
effect: 'random', // el efecto que puede ser fadeIn, slideLeft, slideTop o random
centered: true // si queremos que se centre
}
txt.textualizer(list, options); // enviamos los datos
txt.textualizer('start'); // y lo ejecutamos
</script>
Como cualquier otra etiqueta, podemos definir su estilo; por ejemplo:
<style>
#demo {
color: #FFF;
font-family: Georgia;
font-size: 20px;
height:140px;
width: 500px;
}
</style>

Eventualmente, tres funciones más nos permitirían controlarlo:
.textualizer('pause') pausaria la animación
.textualizer('stop') la detendría por completo
.textualizer('destroy') la elimininaría

No hay comentarios:

Publicar un comentario