Rotating Text With Animate.css And Pure JavaScript – ReplaceMe.js

ReplaceMe.js is a small and dependency-free JavaScript text rotator library which enables you to rotate through a set of predefined text with fancy animations provided by animate.css.

How to use it:

Load the animate.css or any other CSS animation library you prefer in the head section of the webpage.

<link rel="stylesheet" href="/path/to/animate.min.css">

Wrap the first text into an inline element with the CSS class of ‘replace-me’, and then wrap the other text separated with ‘,’ into a hidden element as follows:

I Like <strong class="replace-me">JavaScript<span style="display:none;">, CSS3, HTML5, Pythor</span></strong>.

Initialize the ReplaceMe with default settings.

var myRotator = new ReplaceMe();

Config the RelaceMe using the following options.

var myRotator = new ReplaceMe({
    element: document.querySelector('.replace-me'), // DOM element or query selector 
    animation: 'animated fadeIn', // String (animation class)
    speed: 2000,  // Integer
    separator: ',', // String
    hoverStop: false, // Boolen
    clickChange: false, // Boolen
    loopCount: 'infinite', // String or integer
    autoRun: true,  // Boolen
    onInit: false, // Function
    onChange: false, // Function
    onComplete: false  // Function
});

API methods.

// start or resume
myRotator.start();
// stop
myRotator.stop(); 
// pause
myRotator.pause(); 
// switch text
myRotator.change();