如何使用wow.js实现页面滚动时触发animate.css动画特效

前端开发项目经常会需要一些动画来提升用户体验，从而来吸引用户注意力。如果我们自己去造轮子显得有点浪费时间，况且也不符合我们国内互联网公司行情。所以能在网上找到现成的轮子来使用，就不要浪费时间做重复的事情，再说公司也不会给你那么多时间研究开发轮子。

最近接了一个私活，开发一个企业网站宣传，既然是企业宣传，那么特效动画就必不可少的了。

所以自然而然的想到了 wow.js 和 animate.css 来实现。

• wow.js下载
• animate.css下载

wow.js 依赖 animate.css，不需要 jquery；animate.css 是纯 css 动画库，轻松自定义动画设置：样式，延迟，长度，偏移量，迭代…。

使用步骤

1、引入 animate.css

<link rel="stylesheet" href="css/animate.css" />

2、引入 wow.js

<script src="js/wow.min.js"></script>

3、初始化 wow

new WOW().init();

4、在需要动画的标签上面添加 class  注：wow 必须加在动画类名前面。

<div class="wow fadeInUp animated">
  <p>码云笔记</p>
</div>

*动画效果展示网站：点击这里

5、高级选项

注：为了更好的控制动画效果（属性）

<div class="wow fadeInUp animated" data-wow-delay="1.5s" data-wow-iteration："1">
  <p>码云笔记</p>
</div>

相关属性：

• data-wow-duration：更改动画持续时间
• data-wow-delay：动画开始前的延迟
• data-wow-offset：开始动画的距离（与浏览器底部相关）
• data-wow-iteration：动画的次数重复（无限次：infinite）

上面的已经可以实现动画效果了，但是还有个问题，这些动画会在加载页面时一股脑触发，我们往往想要的是滚动到这里才开始触发。

我们可以使用自定义配置。

这时的 JS 代码：

var wow = new WOW({
  boxClass: 'wow',
  animateClass: 'animated',
  offset: 0,
  mobile: true,
  live: true
});
wow.init();

相关属性介绍：

• boxClass：用户滚动时显示隐藏框的类名。
• animateClass：触发 CSS 动画的类名（animate.css 库默认为“animated”）
• offset：偏移量，定义浏览器视口底部和隐藏框顶部之间的距离。当用户滚动并到达这个距离时，隐藏的框被显示出来。
• mobile：在移动设备上打开/关闭 WOW.js。
• live：自动检查页面上的新 WOW 元素。

配置如图：

更酷炫的实现组合

除了使用以上的方法实现动画效果以外，我们还可以采用全屏滚动的 fullpage 插件与 wow 相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

注意：在使用 fullpage.js 下 wow.js 会出现无效失效没动作的情况。

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

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

最后利用 css 将滚动条隐藏，将 html 添加overflow:hidden;，代码如下：

html{
  overflow:hidden;
}

看到这里就应该是可以满足你最常见的动画效果了。

结语

以上就是我在前端开发中使用过的方法，可能对于大家来说司空见惯了，不是什么新鲜技术了，但是我想的是把我用过的方法记录下来，为后面的新人朋友提供参考及学习价值，感谢阅读。