Author: | adrianklimek |
---|---|
Views Total: | 1,767 views |
Official Page: | Go to website |
Last Update: | August 19, 2016 |
License: | MIT |
Preview:

Description:
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();