Animate.css
Animate.css是一个跨浏览器的css3动画库,兼容性很好。官网:https://daneden.github.io/animate.css/。
1 首先引入animate.css文件
<link href="http://cdn.bootcss.com/animate.css/3.1.0/animate.min.css" rel="stylesheet">
2 给元素加上指定给的动画样式名
<div class="animated bounceOutLeft"></div>
这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个是指定的动画样式名。
3 可以通过JS给添加类,实现动画效果
// 增加图标抖动动画类
$(".service-title").hover(function () {
$(this).find('i').addClass('swing')
}, function () {
$(this).find('i').removeClass('swing')
});
jquery-aniview
jquery-aniview是一款非常实用的页面滚动元素进入视口发生动画特效jQuery插件。该插件基于animate.css,你可以使用animate.css中所有的动画过渡效果。该插件会检测指定元素是否进入视口,在元素进入视口时则执行指定的动画效果。
1 引入文件:
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<link href="http://cdn.bootcss.com/animate.css/3.1.0/animate.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/scripts/jquery.aniview.min.js"></script>
2 为html元素设置aniview属性
<a href="pages/about_PE.html" class="aniview slow" av-animation="fadeInRight">
3 在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件
$(‘.aniview‘).AniView();
4 在初始化的时候设置一些配置参数:
var options = {
animateThreshold: 100,
scrollPollInterval: 50
}
$(‘.aniview‘).AniView(options);
- animateThreshold正数值表示元素进入视口指定的像素值之后才会触发动画序列,负数值表示在元素进入视口之前多少像素就触发动画序列
- scrollPollInterval int 测试用户滚动的频率,单位毫秒,这是jQuery内置的”scroll”事件的延伸
注意:任何在页面加载时就处于视口当中的元素会立刻被触发动画序列。
6 也可以通过CSS控制动画的效果:
//动画显示速度
.fast {
animation-duration: 1s;
animation-delay: 0s;
}
.slow {
animation-duration: 2s;
animation-delay: 0.5s;
}
.reallyslow {
animation-duration: 3s;
animation-delay: 1s;
}