Js 之wow.js + animate.css实现页面在滚动下的动画效果
wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。
wow.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。
一、使用
1、引入animate.css
下载地址：https://www.dowebok.com/demo/2014/98/
<link rel="stylesheet" href="animate.css">
2、引入wow.js
下载地址：https://webscripts.softpedia.com/script/Multimedia/3D-Graphics/WOW-js-82123.html
<script src="wow.min.js"></script>
初始化wow.js
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); }
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 | 异步加载的内容是否有效 |
data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）
这四个可选，可不选
二、示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://www.kedu.cn/css/animate.css"> <style> div{ width: 200px; height: 200px; margin: 0 auto; background-color: red; } </style> </head> <body> <div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div> <script src="https://www.kedu.cn/js/wow.min.js"></script> <script> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){ new WOW().init(); } </script> </body> </html>
