WowJS:在滾動頁面時添加動畫效果的簡單實現

之前介紹過，通過Animate.css可以讓CSS動畫添加起來像喝水一樣容易


不過這種動畫效果卻是沒法控制的，通過 WOW.js ，可以在向下滾動的過程中逐漸釋放這些動畫效果。

默認情況下，當你向下滾動頁面時，可以逐漸展示出 CSS 動畫。它一般使用 animate.css 的動畫效果。但是，您可以輕松設置成您喜歡的動畫庫。

優點

比其他 JavaScript 視覺插件更輕量級，像 Scrollorama (這個太重了，其實我們的需求都是非常簡單的)

超簡單的安裝，與 animate.css 配合，只需幾行代碼即可。

簡單使用

HTML

當滾動到這兩個secion時，其會分別從左/右滾出。

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

JavaScript

new WOW().init();

高級應用

可以改變標志class，默認為 'wow'，動畫速度等

HTML

<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>

JavaScript

var wow = new WOW({
  boxClass:     'wow',      // animated element css class (default is wow)
  animateClass: 'animated', // animation css class (default is animated)
  offset:       0,          // distance to the element when triggering the animation (default is 0)
  mobile:       true,       // trigger animations on mobile devices (default is true)
  live:         true,       // act on asynchronously loaded content (default is true)
  callback:     function(box) {
    // the callback is fired every time an animation is started
    // the argument that is passed in is the DOM node being animated
  }
});
wow.init();

項目地址: https://github.com/matthieua/WOW
DEMO地址：http://mynameismatthieu.com/WOW/

來自：http://ourjs.com/detail/558fdaee20cbb7f655000012