This time I will share jQuery Plugin and tutorial about CSS3 Animated Text Rotator / Carousel Plugin – Changethewords.js, hope it will help you in programming stack.
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.
1 |
<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.
1 |
<div id="changethewords"> |
3 |
<span data-id="1">JavaScript</span> |
4 |
<span data-id="2">HTML5</span> |
5 |
<span data-id="3">CSS3</span> |
6 |
<span data-id="4">ReactJS</span> |
7 |
<span data-id="5">AngularJS</span> |
8 |
<span data-id="6">jQuery</span> |
3. Include the jquery.changethewords.js after jQuery library but before the closing body.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery.changethewords.js"></script> |
4. Apply the default CSS3 transition effect to the text.
1 |
$("#changethewords").changeWords(); |
5. Override the default animation speed.
1 |
$("#changethewords").changeWords({ |
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
1 |
$("#changethewords").changeWords({ |
This awesome jQuery plugin is developed by ataluttasgiran. For more Advanced Usages, please check the demo page or visit the official website.
