WOW.js

作者:王然 kxxoling@gmail.com

简介

WOW.js 是一个基于 animate.css 的动画效果库,使用简单。

基本使用

WOW.js 依赖于 animate.css ,所以使用前需引用 animate.css

  1. <link rel="stylesheet" href="css/animate.css">
  2. <script src="js/wow.min.js"></script>

初始化

  1. <script>
  2. new WOW().init();
  3. </script>

WOW.js 根据 wow 类标记需要添加动画效果的元素:

  1. <div class="wow">
  2. Content to Reveal Here
  3. </div>

再通过特定的类型设置动画类型,比如 bounceInUp 可以设置 自上而下的反弹效果

  1. <div class="wow bounceInUp">
  2. Content to Reveal Here
  3. </div>

至此,已经实现了滚动时的动画效果。

高级设置

data-wow-duration:动画的持续时间 data-wow-delay:动画出现的延迟 data-wow-offset:动画的偏移距离(相对于浏览器底部) data-wow-iteration:动画出现的重复次数

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

配置

boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box. When the user scrolls and reach this distance the hidden box is revealed.

  1. wow = new WOW(
  2. {
  3. boxClass: 'wow', // default
  4. animateClass: 'animated', // default
  5. offset: 0, // default
  6. mobile: true, // default
  7. live: true // default
  8. }
  9. )
  10. wow.init();

相关链接

英文文档 官网及示例 GitHub