wow.js简介
功能:
- 滚动页面, 显示css动画
- 和animate.css配合使用
wow.js基本使用
基本使用方法
- 导入animate.css
- 导入wow.js
- 在需要动画的元素上添加wow类名
- 在需要动画的元素上添加动画类名
- 在js中创建并初始化wow对象 new WOW().init();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
width: 100px;
height: 100px;
background-color: #cecece;
margin: 50px auto;
}
</style>
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/wow.js"></script>
</head>
<body>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<script>
window.onload = function () {
new WOW().init();
};
</script>
</body>
</html>
wow设置动画属性
- data-wow-duration 动画时长
- data-wow-delay 动画延迟
- data-wow-iteration 动画次数
- data-wow-offset 当元素的顶部与浏览器底部的距离到达指定值的时候才显示并执行动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
section {
width: 100px;
height: 100px;
background-color: #cecece;
margin: 0 auto;
border: 1px solid red;
box-sizing: border-box;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/wow.js"></script>
</head>
<body>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft" data-wow-duration="5s"></section>
<section class="wow slideInRight" data-wow-delay="3s"></section>
<section class="wow slideInLeft" data-wow-iteration="10"></section>
<section class="wow slideInRight" data-wow-offset="467" style="background-color: red" id="test"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
<script>
window.onload = function () {
new WOW().init();
window.onscroll = function (event) {
var targetX = $('#test').offset().top;
var distance = targetX - $(window).scrollTop();
var x = window.innerHeight - distance;
console.log(x);
}
};
</script>
</body>
</html>
wow js设置动画相关属性
- boxClass : 动画元素的类名(默认为wow)
- animateClass
- offset 元素偏移(默认为0)
- mobile 是否在移动设备上执行动画(默认为true)
- live
- callback 动画完成的回调(box属性为动画所在的dom元素)
- scrollContainer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
section {
width: 100px;
height: 100px;
background-color: gold;
margin: 0 auto;
border: 1px solid red;
box-sizing: border-box;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/wow.js"></script>
</head>
<body>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft" data-wow-duration="5s"></section>
<section class="hello slideInRight" data-wow-delay="3s"></section>
<section class="hello slideInLeft" data-wow-iteration="10"></section>
<section class="hello slideInRight" data-wow-offset="467" style="background-color: red" id="test"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<section class="hello slideInLeft"></section>
<section class="hello slideInRight"></section>
<script>
window.onload = function () {
var wow = new WOW({
boxClass: 'hello', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function(box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
console.log('world')
console.log(box);
},
scrollContainer: null // optional scroll container selector, otherwise use window
});
wow.init();
};
</script>
</body>
</html>
