SummArg | Cursos y recursos para webmasters

06/03/2012

Transiciones de texto animado con jQuery Textualizer

Textualizer es un plugin para jQuery cuya función es realizar transiciones de texto con diferentes animaciones posibles. Para insertarlo en un proyecto primero descargamos el plugin desde el site del autor y la librería jQuery.

<script src="scripts/jquery.min.js"></script>
<script src="scripts/textualizer.js"></script>

Luego colocamos el contenedor en donde se mostrará la animación.

<div id="txtlzr"></div>

Y finalmente cargamos el texto a animar seguido de los parámetros del script.

<script>
$(function() {
prettyPrint();
 
var list = ['Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. Just like this...'
,'When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.'
, 'Textualize: verb - to put into text, set down as concrete and unchanging. Use Textualizer to transition through blurbs of text.'
, 'Blurb: noun - a short summary or some words of praise accompanying a creative work. A promotional description.'];
 
var txt = $('#txtlzr');
 
txt.textualizer(list, { duration: 3000 });
txt.textualizer('start');
});
 
</script>

Dejar un comentario