WOW是animate.css的好朋友,一开始的时候动画效果并不会出现,只有当界面滚动的时候或者是当达到一定的值得时候才会出现动画效果。
WOW.js地址
animate.css地址
WOW demo地址
WOW.js要配合animate.css使用!!
引入wow.js：
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW() .init();
</script>
简单示例：(必须设置为块状或者行内块状！)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WOW动画效果</title>
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div class ="wow bounceInUp">
<div style="width: 100px;height: 100px;background: #00ff00;margin: 0 auto;"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW() .init();
</script>
用法介绍：
1、使元素显现
添加类`.wow`到HTML元素，它将不可见，直到用户滚动显示它。
<div class ="wow">
内容显示在这里
</div>
2、选择动画风格
在Animate.css中选择动画样式，然后将CSS类添加到HTML元素。
<div class =“wow bounceInUp”>
内容显示在这里
</div>
示例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WOW动画效果</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.min.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);
})
})
图示.png
自定义设置
- 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
各种class类名的动画效果：
| wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
|---|---|
| wow bounceIn | 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 |
| wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
| wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
| wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
| wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不 |
| wow slideInUp | 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） |
| wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
| wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） |
| wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
| wow lightSpeedIn | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 |
| wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） |
| wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
| wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
| wow bounce | 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow shake | 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow swing | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 |
| wow bounceInU | 原位置不变、直接从不显示到显示（无过过渡效果） |
| wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
参考地址1：https://www.jianshu.com/p/19e70670b218
参考地址2：https://www.cnblogs.com/yangjunfei/p/6746926.html
