Smoothly Animate Text Letter By Letter - jQuery Fonteo
File Size: | 10.6 KB |
---|---|
Views Total: | 2372 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fonteo is a simple but customizable jQuery text animation plugin that smoothly animates given text letter by letter using your own functions.
More features:
- Autoplay and pause on hover.
- Infinite loop.
- RTL or LTR.
- Custom template.
How to use it:
1. Place the minified version of the jQuery Fonteo plugin after jqUERY.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="fonteo.js"></script>
2. Create a container in which you want to place the animated text.
<span class="fonteo"></span>
3. Initialize the plugin, specify the text to animate and customize the animation using the letterIn
& letterOut
functions as follows:
var opts = { text: 'Text To Animate...', direction: 'right', infinite: true, moving: true, pauseOnHover: true, speed: 10, letterIn: function(lr){ lr.animate({'font-size':'30px', 'margin-left':'5px' }) lr.css('color','green') setTimeout( function(){ lr.css('color','blue') lr.animate({'font-size':'20px', 'margin-left':'22px' }) }, 100 ) setTimeout( function(){ lr.animate({'font-size':'40px', 'margin-left':'0px' }) lr.css('color','black') }, 200 ) }, letterOut: function(lr){ lr.animate({'font-size':'10px'},500,function(){ $(this).fadeOut(300, function(){ $(this).remove() }) }) } } $('.fonteo').fonteo( opts )
4. You're also able to create the text animation using HTML data
attributes:
<span class="fonteo" data-OPTION="value"> </span>
5. All default options.
// 'right' or 'left' // data-direction direction: 'default', // infinite loop // data-infinite infinite: false, // enable moving // data-moving moving: false, // text to animate // data-text text: '', // animation speed // data-speed speed: 100, // pause on hover // data-pause-on-hover pauseOnHover: false, // class name // data-class-name className: 'fonteo-letter', // custom template // data-tpl tpl: "<span>{{fonteo-letter}}</span>", // functions & callbacks letterIn: false, letterOut: false, complete: false, mouseenter: false, mouseleave: false,
This awesome jQuery plugin is developed by miso25. For more Advanced Usages, please check the demo page or visit the official website.