CSS3 Animated Text Rotator / Carousel Plugin - Changethewords.js

CSS3 Animated Text Rotator / Carousel Plugin - Changethewords.js
File Size: 11.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.