一、WOW.js介绍
WOW.js 实现了在网页滚动时的动画效果,可以让你的页面更有趣,比如页面在向下滚动的时候,让一些元素产生动画效果,吸引用户的注意。
注意点:WOW.js 实现需要 Animate.css 项目的支持。
点击前往WOW.js官网
二、使用步骤
1.打开git链接下载WOW.js
2.解压文件,找到dist下的wow.min.js文件用于链接到页面中使用WOW.js
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="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>
<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>
目录附带如下:
欢迎反馈文中表述不准确的地方或是不足之处~