Textillate.js

See a live demo here.

Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.

Usage

Let's start with the basic markup:

<h1 class="tlt">My Title</h1>

And your JavaScript should look like this:

$(function () {

$('.tlt').textillate();

})

This will animate using the default options. To change the defaults, you can either use the html data api:

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

or pass in options on initialization (see full list of options below):

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

You can also tell textillate.js to animate a list with the following markup:

<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>

<li data-in-effect="fadeIn">Another Title</li>

</ul>

</h1>

$('.tlt').textillate();

Notice that you can control the animation parameters on each text (<li>) using the data api.

Dependencies

To start using textillate.js, you will need the following:

jQuery

lettering.js

animate.css

18.9 KB