This time I will share jQuery Plugin and tutorial about jQuery Plugin To Handle Animate.css Powered CSS3 Animations – aniAuto, hope it will help you in programming stack.
aniAuto is a tiny, flexible jQuery plugin which allows to create configurable, complex, Animate.css based CSS3 animations on any DOM elements.
How to use it:
1. Load the awesome Animate.css CSS3 animation library in the header of the html page.
1 |
<link rel="stylesheet" href="/path/to/animate.min.css"> |
2. Load jQuery library and the jQuery aniAuto plugin in the page.
1 |
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> |
2 |
<script src="js/aniAuto.min.js"></script> |
3. Add the ‘ani-auto’ class and an animation class of your choice to the DOM element as follow:
1 |
<div id="demo" class="ani-auto tada" > |
4. Config the animation using the following attributes:
- ani-init-hide: hide on init
- ani-delay: delay in ms before trigger the animation
- ani-duration: animation duration in ms
- ani-iteration: repeat times
- ani-trigger: trigger element
- ani-scroll ani-scroll-offset: auto scroll (with offset)
01 |
<div class="ani-auto tada" |
06 |
ani-trigger="#trigger-element" |
08 |
ani-scroll-offset="-2%" |
Change log:
2016-11-08
This awesome jQuery plugin is developed by justinzzc. For more Advanced Usages, please check the demo page or visit the official website.
