Simple Text Rotator Plugin with jQuery and CSS3 Animations - Morphext

Simple Text Rotator Plugin with jQuery and CSS3 Animations - Morphext
File Size: 9.97 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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)

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.