File Size: 74KB
Total Views: 3625
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
Textillate.js combines some awing libraries to produce a ease-to-use plugin for applying CSS3 animations to any text.
Simply embody textillate.js and it’s dependencies in your project to begin making unique effects.
Textillate.js is constructed on high of the straightforward, nonetheless surprisingly powerful animate.css and piece of writing.js libraries.
Features:
- Easy to use and customizeable with CSS.
- Multiple texts animation with minimal settings.
- Set display time manually as you need.
- Choose various type of animation from animate.css
How to use it:
1. Load the required JavaScript jquery.lettering.js
and jquery.textillate.js
in the HTML page.
<script src="/path/to/jquery.lettering.js"></script>
<script src="/path/to/jquery.textillate.js"></script>
2. Load the required Stylesheet animate.css
in the HTML page.
<link rel="stylesheet" href="/path/to/animate.css">
3. The HTML structure to create a textillate animation.
<div class="tlt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
4. Initialize the textillate and we’re ready to go.
$(function () {
$('.tlt').textillate({
loop: true,
in:{
effect: 'flipInX'
},
out: {
effect: 'fadeOut'
}
});
});
Plugin’s default configuration 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'
});
Plugin’s Options:
Name | Default | Type | Description |
---|---|---|---|
selector | .texts |
string | the default selector to use when detecting multiple texts to animate |
loop | false |
boolean | enable looping |
minDisplayTime | 2000 |
number | sets the minimum display time for each text before it is replaced |
initialDelay | 0 |
number | 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) |
autoStart | true |
boolean | set whether or not to automatically start animating |
inEffects | null |
custom set of ‘in’ effects. This effects whether or not the character is shown/hidden before or after an animation | |
outEffects | hinge |
custom set of ‘out’ effects | |
in: in animation settings | |||
effect | fadeInLeftBig |
string | set the effect name |
delayScale | 1.5 |
number | set the delay factor applied to each consecutive character |
delay | 50 |
number | set the delay between each character |
sync | false |
boolean | set to true to animate all the characters at the same time |
shuffle | false |
boolean | randomize the character sequence (note that shuffle doesn’t make sense with sync = true) |
reverse | false |
boolean | reverse the character sequence (note that reverse doesn’t make sense with sync = true) |
callback | function |
null | callback that executes once the animation has finished |
out: out animation settings. | |||
effect | hinge |
string | set the effect name |
delayScale | 1.5 |
number | set the delay factor applied to each consecutive character |
delay | 50 |
number | set the delay between each character |
sync | false |
boolean | set to true to animate all the characters at the same time |
shuffle | false |
boolean | randomize the character sequence (note that shuffle doesn’t make sense with sync = true) |
reverse | false |
boolean | reverse the character sequence (note that reverse doesn’t make sense with sync = true) |
callback | function |
null | callback that executes once the animation has finished |