jQuery Text Animation Plugin with CSS3 - textillate
File Size: | 18.9 KB |
---|---|
Views Total: | 10903 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
textillate is a simple jQuery plugin for creating awesome text animation effects using Animate.css powered CSS3 animations.
How It Works:
The plugin uses lettering plugin to break down text into characters (or words) and then applies CSS3 animations of your choice to each of them.
See also:
How to use it:
1. Include jQuery library and other dependency files on the page.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.lettering.js"></script> <script src="/path/to/jquery.textillate.js"></script>
2. Include the needed Animate.css for CSS3 animations.
<link href="/path/to/animate.min.css" rel="stylesheet" />
3. Define your own text to be animated.
<div class="demo"> jQuery Script </div>
4. Call the function on the container and done.
$(function () { $('.demo').textillate(); })
5. Specify the type of CSS3 animation you want to use.
<!-- Via HTML Data Attributes --> <div class="demo" data-out-effect="fadeOut" data-in-effect="fadeIn" data-out-shuffle="true"> jQuery Script </div>
// OR Via JavaScript $('.demo').textillate({ in: { effect: 'fadeInLeftBig', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }, out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, reverse: false, shuffle: false, callback: function () {} }, });
6. More plugin options to customize the text animation.
$('.demo').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' ], // callback that executes once textillate has finished callback: function () {}, // set the type of token to animate (available types: 'char' and 'word') type: 'char' });
7. API methods.
// start the animation $('.demo').textillate('start'); // pause/stop the animation $('.demo').textillate('stop'); // trigger in/out animations $('.demo').textillate('in'); $('.demo').textillate('out');
8. Event handlers.
$('.demo').on('inAnimationBegin.tlt', function () { // do something }); $('.demo').on('inAnimationEnd.tlt', function () { // do something }); $('.demo').on('outAnimationBegin.tlt', function () { // do something }); $('.demo').on('outAnimationEnd.tlt', function () { // do something }); $('.demo').on('start.tlt', function () { // do something }); $('.demo').on('end.tlt', function () { // do something });
Changelog:
2021-03-05
- Doc updated
2016-11-09
- Support styling based on currently active item
This awesome jQuery plugin is developed by jschr. For more Advanced Usages, please check the demo page or visit the official website.