Morphext

Morphing + Text = Morphext

The simplest text rotator powered by jQuery and Animate.css

Download (v2.4.4) Source (GitHub)

Installation

1. Direct download link or via Bower:
bower install Morphext --save
2a. Import CSS (Prerequisite: Animate.css):
<link rel="stylesheet" href="bower_components/Morphext/dist/morphext.css">
2b. Import JS (Prerequisite: jQuery):
<script src="bower_components/Morphext/dist/morphext.min.js"></script>

Usage

3. HTML (Example):
I am a <span id="js-rotating">So Simple, Very Doge, Much Wow, Such Cool</span> Text Rotator
4. Initiate and customise (JS):
$("#js-rotating").Morphext({
    // The [in] animation type. Refer to Animate.css for a list of available animations.
    animation: "bounceIn",
    // An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple | Very Doge | Much Wow | Such Cool).
    separator: ",",
    // The delay between the changing of each phrase in milliseconds.
    speed: 2000,
    complete: function () {
        // Called after the entrance animation is executed.
    }
});

Preview (Phrases in a paragraph)

I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator

I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator