站在Animate肩膀上的项目

大家好，我是前端实验室的大师兄！

今天大师兄给大家分享一个有趣的滚动页面动画加载的JS库：WOW.js。

真的是“库如其名”，大师兄使用过程中，心里也难免不“哇哦”。

WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣。

比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。

注意点：WOW.js 实现需要 Animate.css 项目的支持。

1.打开git链接下载WOW.js（见文章末尾处）

2.解压文件，找到dist下的wow.min.js文件用于链接到页面中使用WOW.js

3.首先要在页面中链入Animate.css

代码语言：javascript复制

<!-- 引入animate文件 -->
<link rel="stylesheet" href="css/animate.min.css">

4.在页面底部引入wow.min.js文件并进行初始化

代码语言：javascript复制

<script src="../js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

也可以进行自定义配置，如下所示：

代码语言：javascript复制

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.接下来看下页面标签的内容。

代码语言：javascript复制

<div class="wow slideInLeft" 
data-wow-duration="2s" 
data-wow-delay="5s" 
data-wow-offset="10"  
data-wow-iteration="10">
</div>

重点需要关注块级元素的属性。

两个基础选项

四个高级选项，也是可选项。

虽说是可选项，但要想完成滚动动画加载效果，它们就非常重要了。

前面说过，data-wow-offset属性中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。 这个需要特别注意。

还有就是网站采用全屏滚动的fullpage插件与wow相结合时，实现的效果比较酷炫。我们完全可以仿写，但是使用 fullpage.js 下 wow.js 无效失效没动作。

问题出在fullpage隐藏了滚动条,将滚动条开启即可。把scrollBar设置为true,代码如下

代码语言：javascript复制

  $(‘#fullpage‘).fullpage({
scrollBar:true；
  });

最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下

代码语言：javascript复制

  html{

    overflow:hidden;

  }

要想了解更多内容，大家可参考 wow.js 的相关网站。

官网地址 https://wowjs.uk/
github地址 https://github.com/graingert/wow

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。

如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~

0 人点赞