This time I will share jQuery Plugin and tutorial about jQuery Plugin For Configurable Animate.css Powered Animations – animateCSS, hope it will help you in programming stack.
animateCSS is a very small jQuery plugin which applies configurable & customizable Animate.css based CSS3 animations to any DOM objects.
Installation:
2 |
$ npm install @claviska/jquery-animate-css --save |
How to use it:
1. Include the required Animate.css in the header of your html document.
1 |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> |
2. Include jQuery and the JavaScript file jquery.animateCSS.js at the end of the html document.
1 |
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> |
3. Apply a CSS3 animation of your choice to your element by calling the function animateCSS and pass the animation type as the first parameter as this:
1 |
$('.box').animateCSS('flipInY'); |
4. Set the animation delay & duration in milliseconds.
1 |
$('.box').animateCSS('flipInY',{ |
4. Trigger a callback function after the animation is complete.
1 |
$('.box').animateCSS('flipInY',{ |
2 |
complete: function() {} |
Change log:
2017-10-27
- Add support for AMD/CommonJS
2017-03-24
- Improve performance when delay = 0
This awesome jQuery plugin is developed by claviska. For more Advanced Usages, please check the demo page or visit the official website.
