WOW.js的使用入门,什么是WOW
首先在github上下载,
http://mynameismatthieu.com/WOW/
WOW是animate.css的好朋友,一开始的时候动画效果并不会出现,只有当界面滚动的时候或者是当达到一定的值得时候才会出现动画效果
WOW.js要配合animate.css使用!!
-
一.安装WOW.js
- 1.链接到Animate.css
http://daneden.github.io/animate.css/
（您可以通过更改WOW.js设置链接到另一个CSS动画库）
<link rel =“stylesheet”href =“css / animate.css”>
- 1.链接到Animate.css
2.链接并激活WOW.js
<script src =“js / wow.min.js”> </script>
<script>
new WOW（）.init（）;
</script>
- 二.揭示CSS动画
- 1.使元素显现
将CSS类.wow添加到HTML元素：它将不可见，直到用户滚动显示它。
（您可以在WOW设置中更改此CSS类，以避免名称冲突。）
<div class =“wow”>
内容显示在这里
</div>
-2.选择动画风格
在Animate.css中选择动画样式，然后将CSS类添加到HTML元素
<div class =“wow bounceInUp”>
内容显示在这里
</div>
完成以上的步骤就说明当滚动时动画就可以显现了
demo1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/animate.css">
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.box{
width: 900px;
height: 300px;
}
.box div{
width: 400px;
height: 300px;
background: red;
}
.box div:nth-of-type(1){
float: left;
}
.box div:nth-of-type(2){
float: right;
}
</style>
<script src="js/wow.js"></script>
<script>
window.onload=function(){
new WOW().init();
}
</script>
</head>
<body>
<div class="box">
<div class="wow slideInLeft">1</div>
<div class="wow slideInRight">2</div>
</div>
</body>
</html>
- 三.高级设置
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始之前的延迟
data-wow-iteration：动画的次数重复
data-wow-offset：开始动画的距离（与浏览器底部相关）
<div class="box">
<div class="wow slideInLeft" data-wow-delay="0s" data-wow-iteration="4">1</div>
<div class="wow slideInRight"data-wow-delay="2s" >2</div>
</div>
这里指的开始动画的距离是与浏览器底部的距离
一开始的时候动画没有出现
$(function(){
//1.初始化
new WOW().init();
//2.监听页面滚动
var vheight= 0, vscroll= 0, voffset=0,vDataWowOffset=0;
$(window).on('scroll',function(){
// console.log('滚动了');
//2.1求出可视区域的高度
vheight=$(window).height();
// console.log(vheight);
//2.2求出滚动的距离
vscroll=$(window).scrollTop();
// console.log(vscroll);
//2.3求出当前元素的offsetTop
voffset=$('#test').offset().top;
// console.log(voffset);
//2.4求出offset
vDataWowOffset=vscroll+vheight-voffset;
console.log(vDataWowOffset);
})
})
<div class="box">
<div class="wow slideInLeft" >1</div>
<div class="wow slideInRight" id="test" data-wow-offset="400">2</div>
</div>
QQ截图20170422213340.png
这个距离就是我们开始动画的距离
当我们滚动鼠标 ,选中的div距离浏览器底部的距离一旦达到我们设置的值data-wow-offset="400"就会出现动画效果
- 四.自定义设置
- boxClass：用户滚动时显示隐藏框的类名。
- animateClass：触发CSS动画的类名（animate.css库默认为“animated”）
- 偏移量：定义浏览器视口底部和隐藏框顶部之间的距离。 当用户
- 滚动并到达这个距离时，隐藏的框被显示出来。
- 手机：在移动设备上打开/关闭WOW.js。
- 活着：检查页面上新的WOW元素。
$(function(){
//1.初始化
// new WOW().init();
var wow=new WOW({
boxClass:"wow",//动画元素的CSS类（默认类名wow）
animateClass:'animated',// 动画CSS类 （默认类名animated）
offset:0,
mobile:true// 是否在移动设备上执行动画 （默认是true）
})
wow.init()
})
他有个不好的地方就是动画只能做一次,做完这一次,下次即使在达到这个条件他就不会再做了,除非重新刷新页面.
有一个框架可以实现来回都可以实现动画效果,就是scrollReveal
image.png
image.png
image.png
image.png
image.png
image.png
