网站页面滚动时添加动画效果CSS和WOW.JS

通过 WOW.js ，可以在向下滚动的过程中逐渐释放这些动画效果。

Animate动画效果演示网址：http://www.fzyxwl.com/t/animate/

下载WOW.js+Animate.css【本站下载】

默认情况下，当你向下滚动页面时，可以逐渐展示出 CSS 动画。它一般使用 animate.css 的动画效果。但是，您可以轻松设置成您喜欢的动画库。

优点：比其他 JavaScript 视觉插件更轻量级，像 Scrollorama (这个太重了，其实我们的需求都是非常简单的)超简单的安装，与animate.css配合，只需几行代码即可。

设置WOW.js

1、链接到CSS动画库

链接到 Animate.css（可以通过更改WOW.js设置链接到另一个CSS动画库）

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

2、链接并激活WOW.js

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

显示CSS动画

1、使元素易于显示

将CSS类.wow添加到HTML元素：在用户滚动显示它之前，它将不可见。
（您可以在WOW设置中更改此CSS类，以避免名称冲突。）

<div class="wow">
Content to Reveal Here
</div>

2、选择动画样式

在Animate.css中选择一种动画样式 ，然后将CSS类添加到HTML元素中

<div class="wow bounceInUp">
Content to Reveal Here
</div>

你完成了！

现在，当用户滚动时，您的动画将显示出来。

高级选项

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

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

自定义设置

boxClass：类名，在用户滚动时显示隐藏的框。

animateClass：触发CSS动画的类名称（animate.css库默认为“ animated”）

offset：定义浏览器视口底部与隐藏框顶部之间的距离。
当用户滚动并到达此距离时，隐藏的框会显示出来。

mobile：在移动设备上打开/关闭WOW.js。

live：在页面上同时检查新的WOW元素。

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