CSS3 Animated Text Rotator / Carousel Plugin - Changethewords.js

Changethewords.js is a really small (~1kb) jQuery plugin which help rotate through pieces of text with CSS3 based animations based on Animate.css.

How to use it:

1. Include the animate.min.css on the webpage that will provide more than 70 fancy CSS3 animations for the text rotator.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

2. Wrap the text you want to rotate through into inline elements.

<div id="changethewords">
  I love
  <span data-id="1">JavaScript</span>
  <span data-id="2">HTML5</span>
  <span data-id="3">CSS3</span>
  <span data-id="4">ReactJS</span>
  <span data-id="5">AngularJS</span>
  <span data-id="6">jQuery</span>
</div>

3. Include the jquery.changethewords.js after jQuery library but before the closing body.

<script src="jquery.min.js"></script>
<script src="jquery.changethewords.js"></script>

4. Apply the default CSS3 transition effect to the text.

$("#changethewords").changeWords();

5. Override the default animation speed.

$("#changethewords").changeWords({
  time: 1500,
});

6. Change the default animation type. All animation CSS classes:

• bounce
• flash
• pulse
• rubberBand
• shake
• headShake
• swing
• tada
• wobble
• jello
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• flipInX
• flipInY
• flipOutX
• flipOutY
• lightSpeedIn
• lightSpeedOut
• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight
• hinge
• rollIn
• rollOut
• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp
• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

$("#changethewords").changeWords({
  time: 1500,
  animate: "tada",
});

---

This awesome jQuery plugin is developed by ataluttasgiran. For more Advanced Usages, please check the demo page or visit the official website.