WOW.js使⽤教程
⽬录
⼀、WOW.js介绍
WOW.js 实现了在⽹页滚动时的动画效果，可以让你的页⾯更有趣，⽐如页⾯在向下滚动的时候，让⼀些元素产⽣动画效果，吸引⽤户的注意。
注意点：WOW.js 实现需要 Animate.css 项⽬的⽀持。
⼆、使⽤步骤
1.打开下载WOW.js
2.解压⽂件，到dist下的wow.min.js⽂件⽤于链接到页⾯中使⽤WOW.jscssclass属性
3.⾸先要在页⾯中链⼊Animate.css
<!-- 引⼊animate⽂件 -->
<link rel="stylesheet"href="css/animate.min.css">
4.在页⾯底部引⼊wow.min.js⽂件并进⾏初始化
<script src="../js/wow.min.js"></script>
<script>
new WOW().init();
</script>
也可以进⾏⾃定义配置，如下所⽰：
var wow =new WOW({
boxClass: ‘wow‘,
animateClass: ‘animated‘,
offset:0,
mobile:true,
live:true
});
wow.init();
配置的含义：
属性类型默认值说明
boxClass字符串‘wow’需要执⾏动画的元素的 class
animateClass字符串‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执⾏动画
mobile布尔值true是否在移动设备上执⾏动画
live布尔值true异步加载的内容是否有效
5.为想要添加动画效果的元素（必须是块级元素或者是⾏内块级元素）先添加⼀个名为’wow’的类名，再为其添加相应动画的动画名即可（这个可以到中查看⾃⼰想要的动画效果类名））。
<div class="wow lightSpeedIn"></div>
也可以为其添加以下四个属性：
属性说明
data-wow-duration更改动画持续时间
data-wow-delay动画开始前的延迟
属性说明
data-wow-offset开始动画的距离（与浏览器底部相关）
data-wow-iteration动画的次数重复（⽆限次：infinite）例如：
<div class="wow lightSpeedIn"data-wow-delay="1.5s"data-wow-iteration："1"></div>
三、案例制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引⼊animate⽂件 -->
<link rel="stylesheet"href="css/animate.min.css">
<style>
*{
padding: 0;
margin: 0;
}
.con{
background: #f5f3f4;
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 800px;
margin:auto;
}
.box{
width: 150px;
height: 150px;
margin: 50px;
box-shadow: 0 0 5px #ccc;
border-radius: 50%;
background: #457388;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="con">
<div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="bo
x wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'></div>
<div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.1s"></div> <div class="box wow fadeInUp"data-wow-duration='1s'data-wow-delay="0.2s"></div> </div>
<script src="js/wow.min.js"></script>
<script>
// 2.初始化
// 如果不为ie6-9的浏览器，则进⾏⼀个初始化
if(!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
new WOW().init();
};
</script>
</body>
</html>
⽬录附带如下：
欢迎反馈⽂中表述不准确的地⽅或是不⾜之处~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。