建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery基于animate动画插件aniAuto.js

来源:易助科技网浏览量:14收藏

简介

aniAuto.js是一款基于 animate.css 的jquery插件,只需添加一些标签属性和一行js脚本就可以组合出复杂的动画效果。

(下载的附件中附有DEMO)


使用

1.  引入文件


<link rel="stylesheet" href="animate.css">
<script src="jquery-1.12.3.min.js"></script>
<script src="aniAuto.js"></script>


2.  HTML


<div id="item_1" class="ani-auto item tada">
  item
</div>


3.  调用


<script>
  $(document).ready(function () {
    $.aniAuto();
  });
</script>


可配置项

1. 初始隐藏 (attribute) ani-init-hide


<div class="ani-auto  tada" ani-init-hide>
            hide
</div>

//添加ani-init-hide 属性后初始会隐藏,动画开始的时候出现


2.延迟 (attribute) ani-delay


<div class="ani-auto  tada" ani-delay="1s">
            delay
</div>

//ani-delay:参考animation-delay的值


3.持续时长 (attribute) ani-duration


<div class="ani-auto  tada" ani-duration="1s">
            duration
</div>

//ani-duration:参考animation-duration的值


4.重复次数 (attribute) ani-iteration


<div class="ani-auto  wobble" ani-iteration="5">
            iteration
</div>

//ani-duration:参考animation-iteration的值


5.触发元素 (attribute) ani-trigger


<div id="item_1" class="ani-auto  tada" >
 delay
</div>

<div id="item_2" class="ani-auto  flipInX" ani-trigger="#item_1">
 trigger
</div>

//ani-trigger:参考jquery选择器


6.自动滚动 (attribute) ani-scroll ani-scroll-offset


<div class=" ani-auto  zoomIn"  ani-scroll ani-scroll-offset="-2%">
      <p>trigger scroll offset </p>
</div>

//ani-scroll-offset 值:
数值,如:-100 ==> 100px
 百分比,如:-2% ==> -2% * $('body').height()



相关链接

中文文档:https://justinzzc.github.io/aniAuto/

GitHub 地址 :https://github.com/justinzzc/aniAuto

Gitee 地址 :https://gitee.com/mirrors/aniauto