159 lines
4.0 KiB
Markdown
159 lines
4.0 KiB
Markdown
#Textillate.js v0.4.0 [](http://js.org)
|
|
|
|
See a live demo [here](http://textillate.js.org/).
|
|
|
|
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:
|
|
|
|
```html
|
|
<h1 class="tlt">My Title</h1>
|
|
```
|
|
|
|
And your JavaScript should look like this:
|
|
|
|
```js
|
|
$(function () {
|
|
$('.tlt').textillate();
|
|
})
|
|
```
|
|
|
|
This will animate using the default options. To change the defaults, you can either use the html data api:
|
|
|
|
```html
|
|
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
|
|
```
|
|
|
|
or pass in options on initialization (see full list of options below):
|
|
|
|
```js
|
|
$('.tlt').textillate({ in: { effect: 'rollIn' } });
|
|
```
|
|
|
|
You can also tell textillate.js to animate a list with the following markup:
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
```js
|
|
$('.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](http://jquery.com/download/)
|
|
* [lettering.js](https://github.com/davatron5000/Lettering.js)
|
|
* [animate.css](https://github.com/daneden/animate.css)
|
|
|
|
|
|
##Options
|
|
|
|
```js
|
|
$('.tlt').textillate({
|
|
// the default selector to use when detecting multiple texts to animate
|
|
selector: '.texts',
|
|
|
|
// enable looping
|
|
loop: false,
|
|
|
|
// sets the minimum display time for each text before it is replaced
|
|
minDisplayTime: 2000,
|
|
|
|
// sets the initial delay before starting the animation
|
|
// (note that depending on the in effect you may need to manually apply
|
|
// visibility: hidden to the element before running this plugin)
|
|
initialDelay: 0,
|
|
|
|
// set whether or not to automatically start animating
|
|
autoStart: true,
|
|
|
|
// custom set of 'in' effects. This effects whether or not the
|
|
// character is shown/hidden before or after an animation
|
|
inEffects: [],
|
|
|
|
// custom set of 'out' effects
|
|
outEffects: [ 'hinge' ],
|
|
|
|
// in animation settings
|
|
in: {
|
|
// set the effect name
|
|
effect: 'fadeInLeftBig',
|
|
|
|
// set the delay factor applied to each consecutive character
|
|
delayScale: 1.5,
|
|
|
|
// set the delay between each character
|
|
delay: 50,
|
|
|
|
// set to true to animate all the characters at the same time
|
|
sync: false,
|
|
|
|
// randomize the character sequence
|
|
// (note that shuffle doesn't make sense with sync = true)
|
|
shuffle: false,
|
|
|
|
// reverse the character sequence
|
|
// (note that reverse doesn't make sense with sync = true)
|
|
reverse: false,
|
|
|
|
// callback that executes once the animation has finished
|
|
callback: function () {}
|
|
},
|
|
|
|
// out animation settings.
|
|
out: {
|
|
effect: 'hinge',
|
|
delayScale: 1.5,
|
|
delay: 50,
|
|
sync: false,
|
|
shuffle: false,
|
|
reverse: false,
|
|
callback: function () {}
|
|
},
|
|
|
|
// callback that executes once textillate has finished
|
|
callback: function () {},
|
|
|
|
// set the type of token to animate (available types: 'char' and 'word')
|
|
type: 'char'
|
|
});
|
|
```
|
|
|
|
##Events
|
|
|
|
Textillate triggers the following events:
|
|
|
|
* `start.tlt` - triggered when textillate starts
|
|
* `inAnimationBegin.tlt` - triggered when the in animation begins
|
|
* `inAnimationEnd.tlt` - triggered when the in animation ends
|
|
* `outAnimationBegin.tlt` - triggered when the out animation begins
|
|
* `outAnimationEnd.tlt` - triggered when the in animation ends
|
|
* `end.tlt` - triggered when textillate ends
|
|
|
|
```js
|
|
$('.tlt').on('inAnimationBegin.tlt', function () {
|
|
// do something
|
|
});
|
|
```
|
|
|
|
##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
|
|
* [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi)
|