#Textillate.js v0.4.1
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:
<h1 class="tlt">
<ul class="texts">
<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:
##Options
$('.tlt').textillate({
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ],
in: {
effect: 'fadeInLeftBig',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
reverse: false,
callback: function () {}
},
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
reverse: false,
callback: function () {}
},
callback: function () {},
type: 'char'
});
##Events
Textillate triggers the following events:
start.tlt
- triggered when textillate startsinAnimationBegin.tlt
- triggered when the in animation beginsinAnimationEnd.tlt
- triggered when the in animation endsoutAnimationBegin.tlt
- triggered when the out animation beginsoutAnimationEnd.tlt
- triggered when the in animation endsend.tlt
- triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () {
});
##Methods
$element.textillate('start')
- Manually start/restart textillate$element.textillate('stop')
- Manually pause/stop textillate$element.textillate('in')
- Trigger the current text's in animation$element.textillate('out')
- Trigger the current text's out animation
##Code Samples