Skip to content

adrianklimek/replaceme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

40e5192 · Dec 23, 2018

History

17 Commits
Nov 28, 2016
Aug 17, 2016
Aug 28, 2016
Aug 17, 2016
Dec 23, 2018
Nov 28, 2016
Nov 28, 2016

Repository files navigation

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

Releases

No releases published

Packages

No packages published