Easy jQuery Text Rotator With Fancy Typing Animations - Bubble Text

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.