Anima Texto Fácilmente Con Textillate.Js

Anteriormente les habíamos compartido sobre la librería Animate.css, una impresionante biblioteca de CSS3, la cual hace que la creación de animaciones CSS3 sea mucho más fácil. En este post vamos a presentarles un plugin de jQuery, que es capaz de animar texto, el plugin en cuestion se llama Textillate.js.

Aunque puede animar texto con Animate.css, pero este sólo animado todas las letras, no letra por letra. Aunque es posible que tenga un enfoque de envolver cada carácter a un elemento y animarlos, va a ser un problema y no es eficaz. Con este plugin, puede animar cada letra de tu texto fácilmente.

Textillate.js divide la animación en 2 componentes, dentro y fuera de la animación. Es posible aplicarlos con diferentes animaciones, por separado. Todos los efectos de animación utilizan efectos de la biblioteca de Animate.css.

Textillate.js también se construye sobre la base de Lettering.js. Podemos decir, que este plugin es la combinación de estas 2 poderosas herramientas. Animate.css trabaja en el largometraje de animación, mientras que Lettering.js se centra en la tipografía.

Como Usar Textillate.js

Textillate.js necesita algunas dependencias antes de que esté listo para usar. Necesitamos incluir Animate.css, Lettering.js y jQuery. Después de que tienes los archivos descargados, hay que incluirlos en el proyecto:

[html]
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
[/html]

Pero falta algo no? Claro! El animate.css ;)

[html]
<link href="css/animate.css" rel="stylesheet">
[/html]

Una vez hayamos incluido los archivos necesarios en el html, procederemos a añadir identificadores a lo que necesitamos animar, en este caso usaremos una clase de nombre demo:

[html]
<div class="demo">
<p>Each of this letter will animate.</p>
</div>

[/html]

Ahora animaremos el texto cuando se cargue el html:

[html]
<script>
$(function () {
$(‘.demo’).textillate();
})
</script>
[/html]

Opciones De Textillate.Js 

El anterior código Javascript sólo se aplicará la animación por defecto para el texto. Para cambiarla, hay dos métodos que puede utilizar.

1. En primer lugar, mediante la introducción de api data en el HTML como lo siguiente:

[html]
<div data-in-effect="rollIn">
<p>Each of this letter will animate.</p>
</div>
[/html]

data-in-effect indica el efecto de la entrada del texto. Si bien el efecto de salida, puede usar data-out-effect.

2. También puede agregar las opciones en la inicialización del Javascript Textillate.js similar al código siguiente.

[html]
<script>
$(function () {
$(‘.demo’).textillate({
in: {
effect: ‘rollIn’
}
});
})
</script>
[/html]

Además del efecto, hay otras opciones útiles que usted puede querer utilizar. Para ver la lista completa de otras opciones, diríjase a la página de la documentación.