Awesomes技术交流群:

WOW

在你向下滚动页面的时候展示 CSS 动画
2019-03-21 我要评论 4 我要收藏

WOW.js Build Status

当你向下滚动页面时显示CSS动画。 默认情况下,您可以使用它来触发 animate.css 动画。 但是您可以轻松地用您喜爱的动画库来改变设置。

优点:

  • 比其它JavaScript视差插件更轻量,比如Scrollorama(它们可以实现一些华丽的效果,但对于一些简单的需求而言又显得笨重)
  • 极其简单的安装, 并且依赖于animate.css运行, 所以您如果已经使用了它,就会非常快的上手
  • 快速执行、轻量级的代码:浏览器会喜欢它的 :-)
  • 您也可以改变设置 - 见下文

@mattaussaguel查看WOW的升级更新

实例 ➫

实例

版本

1.1.2

文档

仅需要几秒钟来安装和使用WOW.js! 阅读文档 ➫

依赖

安装

  • Bower
   bower install wowjs

基本用法

  • HTML
  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>
  • JavaScript
new WOW().init();

高级用法

  • 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',      // 动画元素的CSS类 默认为 WOW )
    animateClass: 'animated', // 动画CSS类 (默认为 animated )
    offset:       0,          // 触发动画时距离动画元素的距离(默认为 0 )
    mobile:       true,       // 在移动设备上触发动画 (默认为 true )
    live:         true,       // 异步加载内容 (默认为 true )
    callback:     function(box) {
      // 每次动画开始时,该回调函数被触发
      // 被传递的参数为正在动画的DOM节点
    },
    scrollContainer: null // 可选滚动容器选择器,否则使用window
  }
);
wow.init();

异步内容支持

在 IE 10+,Chrome 18+ 和 Firefox 14+,任何DOM节点的动画会在你调用wow.init()后被自动触发。如果你不想这样,你也可以禁用这个设置,只需要将live设置成false

如果你想支持老版的浏览器(比如IE9+),作为后备,你可以在已经添加一个新的DOM元素动画后调用wow.sync()方法(但live任然应该设置成true)。调用wow.sync()没有副作用。

贡献

这个库是用CoffeeScript写的,请更新wow.coffee 文件。

我们使用grunt编译并且精简这个库:

安装所需库

npm install

使编译在后台运行

grunt watch

享受吧!

Bug 跟踪

如果你发现了一个bug,请到此处提交 Github

开发者

由 Matthieu Aussaguel 开发, mynameismatthieu.com

贡献者

感谢到目前为止的所有为此项目贡献的人:

发起和设计: Vincent Le Moign, @webalys

WOW 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论