jquery-scroll-animate 基于jquery的滚动添加动画

本插件功能

• 支持滚动添加动画
• 支持第三方css库animate.css
• 多配置项 可灵活配置

插件配置

JS相关引入

<script src="src/jquery-1.11.3.js"></script>
<script src="src/jquery-scroll-animate.js"></script>

CSS相关引入

<link rel="stylesheet" href='src/animate.css'>

JS插件配置

<script>
$('.abc').jqueryScrollAnimate({
	direction:false,//是否重复播放动画 true为默认值 false 只播放一次 true可重复播放
	distance:0,//触发高度设置 根据需要动画的根元素与滚动条的高度判断关系 可以为负值
	animated:'.ani'// 需要动画元素的css类 默认为.ani		
})
</script>

DOM相关

<div class="abc">
    <div class="text">
        <h1 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.1s'>这是一个大标题</p>
        <h2 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.2s'>这是一个小标题</p>
        <p class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.3s'>这是一段内容</p>
    </div>
</div>
<div class="abc">
    <div class="text">
        <h1 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.1s'>这是一个大标题</p>
        <h2 class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.2s'>这是一个小标题</p>
        <p class="ani" animate-effect='zoomIn' animate-duration='0.3s' animate-delay='0.3s'>这是一段内容</p>
    </div>
</div>

• animate-effect 动画方式 参考animate.css
• animate-duration 动画时间
• animate-delay 动画延时