Transiciones de texto con jQuery

enero 10, 2012 3:59 pm por Pablo.

Textualizer es un plugin jQuery para generar transiciones entre textos de forma dinámica y animada.

El plugin para funcionar necesita unas muy pocas lineas de código. En especial requiere un arreglo con las frases que queremos mostrar, luego un contenedor en donde se mostraran las distintas frases.

Textualizer anima las frases en las distintas transiciones, estas animaciones se pueden personalizar y configurar, podemos cambiar el tiempo como así también las animaciones en sí.

El plugin cuenta con tres efectos distintos: fadeIn, slideLeft, slideTop, y finalmente random. Estas animaciones pueden comenzar y detenerse en cualquier momento, para ello el creador de Textualizer nos provee de un mecanismo muy simple basado en tres estados distintos:

.textualizer('pause') // Pausar las animaciones finalizando la animación

.textualizer('stop') // Frenar la animación al instante.

.textualizer('destroy') // Elimina la instancia.

Modo de uso:

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
    duration: 1000,          // Time (ms) each blurb will remain on screen
    rearrangeDuration: 1000, // Time (ms) a character takes to reach its pos.
    effect: 'random',        // Animation effect the characters use to appear
    centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

Compatible con la mayoría de los navegadores: