设置WOW.js

链接到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 =“哇”>
                内容揭示在这里
                </ DIV>

 

2

 选择动画风格

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

                  <div class =“wow bounceInUp”>
                  内容揭示在这里
                  </ DIV>

你完成了！

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

检查WOW.js + Animate.css使用的这些示例：

* MaterialUp 
* Streamline Icons

高级选项

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

                    <section class =“wow slideInLeft”data-wow-duration =“2s”data-wow-delay =“5s”>
                    </节>

                    <section class =“wow slideInRight”data-wow-offset =“10”data-wow-iteration =“10”>
                    </节>

自定义设置

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

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

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

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

live：在页面上不断检查新的WOW元素。

 

                      哇=新WOW（
                      {
                      boxClass：'哇'，//默认
                      animateClass：'animated'，//默认
                      offset：0，//默认
                      mobile：true，//默认
                      live：true //默认
                    }
                    ）
                    wow.init（）;