Easy jQuery Text Rotator With Fancy Typing Animations - Bubble Text
File Size: | 8.82 KB |
---|---|
Views Total: | 3574 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Bubble Text is an easy-to-use jQuery text rotator plugin which allows to rotate through an array of strings with a fancy text typing & deleting animation.
How to use it:
1. To use this plugin, you will need to load the jquery-bubble-text.js
script after jQuery library like this:
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="jquery-bubble-text.js"></script>
2. Create a container for the text rotator and insert the start string into the DIV element like this:
<div id="bubble">Hello, World!</div>
3. Initialize the plugin and specify the strings you want to rotate through.
var $element = $('#bubble'); bubbleText({ element: $element, newText: 'jQuery Bubble Text', });
4. Change the default animation speed.
var $element = $('#bubble'); bubbleText({ element: $element, newText: 'jQuery Bubble Text', speed: 3000 });
5. Execute a callback after the text animation has done.
var $element = $('#bubble'); bubbleText({ element: $element, newText: 'jQuery Bubble Text', speed: 3000, callback: function(){} });
6. Here is an advanced example that shows how to rotate through an array of custom strings.
var phrases = [ 'Lorem ipsum dolor sit amet ', 'consectetur adipiscing elit', 'Proin vel nisl vel nunc iaculis porttitor', 'Vestibulum eros eros, aliquet', 'Vel hendrerit quis', 'Congue sit amet sapien' ]; $(document).ready(function(){ var $element = $('#bubble'); var index = -1; (loopAnimation = function(){ ++index == phrases.length && (index = 0); bubbleText({ element: $element, newText: phrases[index], speed: 3000, callback: function(){ setTimeout(loopAnimation, 1000) } }); })(); });
Change log:
2016-11-02
- Manager instance from options
2016-10-31
- Fixed spans and space width
2016-10-28
- Cleared float positions before break line
2016-10-21
- JS update
2016-08-17
- enhancement.
2016-08-14
- Fixed a bug
This awesome jQuery plugin is developed by WashingtonGuedes. For more Advanced Usages, please check the demo page or visit the official website.