站在Animate肩膀上的项目
大家好，我是前端实验室的大师兄！
今天大师兄给大家分享一个有趣的滚动页面动画加载的JS库：WOW.js。
真的是“库如其名”，大师兄使用过程中，心里也难免不“哇哦”。
WOW.js介绍
WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣。
比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。
注意点：WOW.js 实现需要 Animate.css 项目的支持。
使用步骤
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 | 异步加载的内容是否有效 |
注意:new WOW().init();中的WOW要大写，否则就没效果了。
5.接下来看下页面标签的内容。
<div class="wow slideInLeft"
data-wow-duration="2s"
data-wow-delay="5s"
data-wow-offset="10"
data-wow-iteration="10">
</div>
重点需要关注块级元素的属性。
两个基础选项
- 设置css类：将CSS类.wow添加到HTML元素（在用户滚动显示它之前，它将是不可见的）
- 选择动画类型：在Animate.css中选择一个动画样式，然后将CSS类添加到HTML元素中；示例中使用的是 slideInLeft 动画样式
四个高级选项，也是可选项。
- data-wow-duration：更改动画持续时间
- data-wow-delay：动画开始前的延迟
- data-wow-offset：元素的位置露出后距离底部多少像素执行（与浏览器底部相关）
- data-wow-iteration：动画执行次数（无限次：infinite）
虽说是可选项，但要想完成滚动动画加载效果，它们就非常重要了。
扩展
前面说过，data-wow-offset属性中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。 这个需要特别注意。
还有就是网站采用全屏滚动的fullpage插件与wow相结合时，实现的效果比较酷炫。我们完全可以仿写，但是使用 fullpage.js 下 wow.js 无效失效没动作。
问题出在fullpage隐藏了滚动条,将滚动条开启即可。把scrollBar设置为true,代码如下
$(‘#fullpage‘).fullpage({
scrollBar:true；
});
最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下
html{
overflow:hidden;
}
要想了解更多内容，大家可参考 wow.js 的相关网站。
官网地址 https://wowjs.uk/
github地址 https://github.com/graingert/wow
写在最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~