ReplaceMe.js is a lightweight text rotator written in vanilla JS, but it can be used with jQuery.
bower install replaceme --save
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>
var replace = new ReplaceMe();
replace.start();
replace.stop();
replace.pause();
replace.change();
All modern browsers and IE10+
ReplaceMe.js is licensed under the MIT license