Animate.css是一个有趣的,跨浏览器的css3动画库。网址:https://daneden.github.io/animate.css/
WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
为了方便大家,我打包了这个插件代码,大家可以直接下载调用:https://pan.baidu.com/s/1i53KqcX
先说Animate.css用法:
1、首先引入animate css文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
2、给指定的元素加你想要的动画名,可以在官网上先了解动画名对应的效果
<div class="animated bounceInLeft"></div>
3、通过jQ来添加动画名
$('#myt').addClass('animated bounceInLeft');
4、
有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
$(function(){
$('#my').addClass('animated bounce');
setTimeout(function(){
$('#my').removeClass('bounce');
}, 1000);
});
5、
animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:
#my{
animate-duration: 2s; //动画持续时间
animate-delay: 1s; //动画延迟时间
animate-iteration-count: 2; //动画执行次数
}
WOW.js的使用方法
1)HTML
<div class="wow animated bounceInLeft"></div>
2)
JavaScript
new WOW().init();
如果需要自定义配置,可如下使用:
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
配置
属性/方法 | 类型 | 默认值 | 说明 |
boxClass | 字符串 | ‘wow’ | ‘wow’需要执行动画的元素的 class |
animateClass | 字符串 | ‘animated’ | ‘animated’animation.css 动画的 class |
offset | 整数 | 0 | 距离可视区域多少开始执行动画 |
mobile | 布尔值 | true | 是否在移动设备上执行动画 |
live | 布尔值 | true | 异步加载的内容是否有效 |
data-wow-delay="0.1s" 动画执行的延迟时间
data-wow-iteration="2" 动画执行的次数
data-wow-duration="0.1s" 动画持续的时间
data-wow-offset="10" 距离可视区域多少开始动画