wow.js使用教程

doc.jpg

设置WOW.js

1.引入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类

将CSS类.wow添加到HTML元素：在用户滚动显示它之前，它将是不可见的。

<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();