Librería para animar textos: textillate.js

Vamos a ver una librería js que utiliza una que vimos anteriormente: animate.css

Esta vez vamos a revisar la textillate.js, luego de una extensa búsqueda es la que más cómoda nos ha quedado. Además utiliza la librería lettering.js que veremos más adelante.

Para comenzar necesitamos descargar la librería y estar segures de haber agregado a nuestro html lo siguiente, pueden elegir la distribución de rutas que más les convenga:

<link href="assets/animate.css" rel="stylesheet">
<link href="assets/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.fittext.js"></script>
<script src="assets/jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>

Forma de usarlo

Con tan sólo agregarle una clase para volver al elemento distinguible desde js y luego ejecutar la funcion textillate alcanza!

HTML

<h1 class="tlt">Titulo</h1>

JavaScript

$(function () {
$('.tlt').textillate();
})

Así quedará animado según las opciones por defecto, para realizar cambios podemos cambiar el html:

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

O bien desde js:

$('.tlt').textillate({ in: { effect: 'rollIn' } });

Aquí les dejo el link de la librería que también muestra dinámicamente un listado de los efectos disponibles:
http://textillate.js.org/

Saludos!