WowJS:在滚动页面时添加动画效果的简单实现


发布者 ourjs  发布时间 1435491054376
关键字 JS学习  JavaScript 
之前介绍过,通过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/




回复 (3)
  • #
  • #1 liuhaihua.cn 1461978300449

    不错,来访了

  • #2 何仅乓 1513158074873

    dfdfdfdsfdsfd

  • #3 盛纠与 1523955236059

    你好啊
    我要在一个页面上同时使用好几个效果 怎么实现

微信扫码 立即评论