jQuery Plugin To Handle Animate css Powered CSS3 Animations aniAuto - Download jQuery Plugin To Handle Animate.css Powered CSS3 Animations - aniAuto

Download jQuery Plugin To Handle Animate.css Powered CSS3 Animations – aniAuto

Posted on

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.

jQuery Plugin To Handle Animate css Powered CSS3 Animations aniAuto - Download jQuery Plugin To Handle Animate.css Powered CSS3 Animations - aniAuto
File Size: 10.7 KB
Views Total: 1481
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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" >
2   demo item
3 </div>

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"
02      ani-init-hide
03      ani-delay="1s"
04      ani-duration="1s"
05      ani-iteration="5"
06      ani-trigger="#trigger-element"
07      ani-scroll
08      ani-scroll-offset="-2%"
09      >
10      ...
11 </div>

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.

source : jqueryscript.net