wow.js簡介
功能:
- 滾動頁面, 顯示css動畫
- 和animate.css配合使用
wow.js基本使用
基本使用方法
- 導(dǎo)入animate.css
- 導(dǎo)入wow.js
- 在需要動畫的元素上添加wow類名
- 在需要動畫的元素上添加動畫類名
- 在js中創(chuàng)建并初始化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設(shè)置動畫屬性
- data-wow-duration 動畫時長
- data-wow-delay 動畫延遲
- data-wow-iteration 動畫次數(shù)
- data-wow-offset 當(dāng)元素的頂部與瀏覽器底部的距離到達(dá)指定值的時候才顯示并執(zhí)行動畫
<!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設(shè)置動畫相關(guān)屬性
- boxClass : 動畫元素的類名(默認(rèn)為wow)
- animateClass
- offset 元素偏移(默認(rèn)為0)
- mobile 是否在移動設(shè)備上執(zhí)行動畫(默認(rèn)為true)
- live
- callback 動畫完成的回調(diào)(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>
