插件名称:animate.css+jquery.aniview.min.js,基于jq
插件作用:网页元素进入视口,播放预定义的动画
如何使用:
1,引入css
<link type="text/css" rel="stylesheet" href="animate.css">
2,引入jq
3,引入js
<script src="jquery.aniview.min.js" type="text/javascript"></script>
4,可以使用一个<div> 来作为动画元素的包裹元素。 为该元素设置class为aniview,av-animation用于设置animate.css的动画过渡效果的class名称:<div class="aniview" av-animation="slideInRight"></div>
5,在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件。
$('.aniview').AniView();
或者在初始化的时候设置一些配置参数:
var
options = {
animateThreshold: 100,
scrollPollInterval: 50
}
$(
'.aniview'
).AniView(options);
|
配置参数
参数 | 类型 | 描述 | 默认值 |
animateThreshold | int | 正数值表示元素进入视口指定的像素值之后才会触发动画序列,负数值表示在元素进入视口之前多少像素就触发动画序列 | 0 |
scrollPollInterval | int | 测试用户滚动的频率。单位毫秒,这是jQuery内置的"scroll"事件的延伸 | 20 |
注意:任何在页面加载时就处于视口当中的元素会立刻被触发动画序列。
动画效果:
贴一端完整的项目代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<link href="css/animate.min.css" type="text/css" rel="stylesheet" />
<style>
.a1{height: 100px; background: #f00;margin-bottom: 50px;width: 100px;position: relative;left: 300px;}
</style>
</head>
<body>
<div class="aniview a1" av-animation="slideInRight">111111111</div>
<div class="aniview a1" av-animation="slideInLeft">22222222</div>
<div class="aniview a1" av-animation="slideInRight">111111111</div>
<div class="aniview a1" av-animation="slideInLeft">22222222</div>
<div class="aniview a1" av-animation="slideInRight">111111111</div>
<div class="aniview a1" av-animation="slideInLeft">22222222</div>
<div class="aniview a1" av-animation="slideInRight">111111111</div>
<div class="aniview a1" av-animation="slideInLeft">22222222</div>
<div class="aniview a1" av-animation="slideInRight">111111111</div>
<div class="aniview a1" av-animation="slideInLeft">22222222</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.aniview.min.js"></script>
<script>
$(document).ready(function() {
var options = {
animateThreshold: 100,
scrollPollInterval: 50,
}
$('.aniview').AniView(options);
});
</script>
</body>
</html>
插件下载地址:http://pan.baidu.com/s/1c1SaDwO
参考文章:http://www.htmleaf.com/jQuery/Layout-Interface/201509092547.html