Easy Text Animation Creation With jQuery - animatext
File Size: | 7.76 KB |
---|---|
Views Total: | 2637 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
animatext is a lightweight, customizable jQuery plugin used to print text strings character by character or word by word, with CSS3 or JavaScript powered animation effects.
How to use it:
1. Include the latest version of jQuery library and the jQuery animaText plugin's script on the webpage.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/animatext.js"></script>
2. Include the Animate.css library for additional animation effects (OPTIONAL).
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
3. Calling the function will apply a default typing animation to the target text.
$(".demo1").animatext();
4. Print the text word by word instead.
$(".demo1").animatext({ mode: "words" });
5. Apply an Animate.css animation to the text while typing.
$(".demo1").animatext({ effect: 'tada' });
6. Reverse the text direction.
$(".demo1").animatext({ reverse: true });
7. Enable the infinite loop functionality.
$(".demo1").animatext({ infinite: true });
8. Override the default animation speed in milliseconds.
$(".demo1").animatext({ speed: 150 });
9. You can also apply the animation to a group of text elements.
$(".group").animatext({ group: true });
10. Print the text randomly.
$(".group").animatext({ random: true });
11. Specify how long to wait before printing the text.
$(".group").animatext({ initDelay: 0 });
12. Specify the delay between each loop.
$(".group").animatext({ timeToRelaunch: 2000 });
13. Callback functions available.
$(".group").animatext({ onBegin: function() {}, onSuccess: function() {} });
This awesome jQuery plugin is developed by oscarlijo. For more Advanced Usages, please check the demo page or visit the official website.