ReplaceMe

ReplaceMe.js is a lightweight text rotator written in vanilla JS, but it can be used with jQuery.

Bower

bower install replaceme --save

Usage

1. Add animate.css or any animations library to the head of a document

2. Set up html

<p>I am <span class="replace-me">Designer,Developer,Photographer</span></p>

Also, you can put other values in hidden span

<p>I am <span class="replace-me">Designer<span style="display:none">,Developer,Photographer</span></span></p>

3. Add replaceme.js at the bottom of a document's body and set up javascript

<script src="replaceme.min.js"></script><script>
    var replace = new ReplaceMe(document.querySelector('.replace-me'));
</script>

If you want to declare custom options:

<script src="replaceme.min.js"></script>
<script>
var replace = new ReplaceMe(document.querySelector('.replace-me'), {
    animation: 'animated fadeIn',                       // Animation class or classes
    speed: 2000,                                        // Delay between each phrase in miliseconds
    separator: ',',                                     // Phrases separator
    hoverStop: false,                                   // Stop rotator on phrase hover
    clickChange: false,                                 // Change phrase on click
    loopCount: 'infinite',                              // Loop Count - 'infinite' or number
    autoRun: true,                                      // Run rotator automatically
    onInit: false,                                      // Function
    onChange: false,                                    // Function
    onComplete: false                                   // Function
});
</script>

Also you can use jQuery:

<script src="replaceme.min.js"></script>
<script>
    var replace = $('.replace-me').ReplaceMe();
</script>

Methods

var replace = new ReplaceMe();
replace.start();
replace.stop();
replace.pause();
replace.change();

Browser Support

All modern browsers and IE10+

License

ReplaceMe.js is licensed under the MIT license