CSS3 Animated Text Rotator / Carousel Plugin - Changethewords.js
File Size: | 11.3 KB |
---|---|
Views Total: | 7128 |
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.