Simple Text Rotator Plugin with jQuery and CSS3 Animations - Morphext

Morphext is a jQuery text rotator plugin for rotating a group of words/phrases of your text with cool CSS3 animations using animate.css.

See also:

• jQuery & CSS3 Based Text Rotator Using Animate.css
• Lightweight jQuery Text Rotator Plugin - Dynamo.js

How to use it:

1. Include the required animate.css for cool CSS3 powered animations.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

2. Include jQuery library and the jQuery morphext plugin at the end of the document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="dist/morphext.js"></script>

3. Wrap the comma-separated words or phrases into an inline element.

<span id="demo">jQuery, JavaScript, Python, Ruby</span>

4. Make sure the animated text is displayed as an inline-level block container.

.morphext > .animated {
    display: inline-block;
}

5. Call the plugin and set the animation type for the text rotator.

("#demo").Morphext({
   animation: "rotateIn"
});

6. Default settings.

("#demo").Morphext({

  // animation settings.
  // see http://daneden.github.io/animate.css/
  animation: "bounceIn",

  // custom separator
  separator: ",",

  // animation speed
  speed: 2000,

  // callback
  complete: $.noop

});

Change logs:

v2.4.7 (2016-11-04)

• Update

v2.4.6 (2015-08-26)

• Update

v2.4.4 (2015-05-22)

• Fixed error with trim() on IE < 8 

v2.3.4 (2015-04-14)

• Added fenced code blocks

---

This awesome jQuery plugin is developed by MrSaints. For more Advanced Usages, please check the demo page or visit the official website.