WOW.js 让页面动起来

如果你想给网站的各个模块增加点动画效果，可以用wow.js试一试，使用方法比较简单容易。seonoco.com目前就使用了其中几种动画效果。找找看有几个，答对有红包！

我根据wow.js源文件的animate.css提取出来的动画效果有:

.hinge 
.bounce 
.flash 
.pulse 
.shake 
.swing 
.tada 
.wobble 
.bounceIn 
.bounceInDown 
.bounceInLeft 
.bounceInRight 
.bounceInUp 
.bounceOut 
.bounceOutDown 
.bounceOutLeft 
.bounceOutRight 
.bounceOutUp 
.fadeIn 
.fadeInDown 
.fadeInDownBig 
.fadeInLeft 
.fadeInLeftBig 
.fadeInRight 
.fadeInRightBig 
.fadeInUp 
.fadeInUpBig 
.fadeOut 
.fadeOutDown 
.fadeOutDownBig 
.fadeOutLeft 
.fadeOutLeftBig 
.fadeOutRight 
.fadeOutRightBig 
.fadeOutUp 
.fadeOutUpBig 
.flip 
.flipInX 
.flipInY 
.flipOutX 
.flipOutY 
.lightSpeedIn 
.lightSpeedOut 
.rotateIn 
.rotateInDownLeft 
.rotateInDownRight 
.rotateInUpLeft 
.rotateInUpRight 
.rotateOut 
.rotateOutDownLeft 
.rotateOutDownRight 
.rotateOutUpLeft 
.rotateOutUpRight 
.slideInDown 
.slideInLeft 
.slideInRight 
.slideOutLeft 
.slideOutRight 
.slideOutUp 
.hinge 
.rollIn 
.rollOut 

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

• Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
• Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
• Fast execution and lightweight code: the browser will like it ;-)
• You can change the settings - see below

Follow @mattaussaguel for updates as WOW evolves.

LIVE DEMO ➫

Live examples

• MaterialUp
• Fliplingo
• Streamline Icons
• Microsoft Stories

Version

1.1.2

License

Commercial license

If you want to use WOW.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a WOW.js Commercial License at uplabs.com/posts/wow-js-commercial

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.

Documentation

It just take seconds to install and use WOW.js! Read the documentation ➫

Dependencies

• animate.css

Installation

• Bower

 bower install wowjs

• NPM

 npm install wowjs

Basic usage

• HTML

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

• JavaScript

newWOW().init();

Advanced usage

• HTML

 <sectionclass="wow slideInLeft"data-wow-duration="2s"data-wow-delay="5s"></section>
 <sectionclass="wow slideInRight"data-wow-offset="10"data-wow-iteration="10"></section>

• JavaScript

var wow =newWOW(
 {
 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 },
 scrollContainer:null// optional scroll container selector, otherwise use window }
); wow.init();

Asynchronous content support

In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically triggered for any DOM nodes you add after callingwow.init(). If you do not like that, you can disable this by settinglivetofalse.

If you want to support older browsers (e.g. IE9+), as a fallback, you can call thewow.sync()method after you have added new DOM elements to animate (butliveshould still be set totrue). Callingwow.sync()has no side effects.

Contribute

You're more than welcome to contribute to this project. Please note: your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. The MIT license or public domain unlicense are permissive, and allow integration of your patch into this project as part of a commercial product.

The library is written in CoffeeScript, please updatewow.coffeefile.

We use grunt to compile and minify the library:

Install needed libraries

npm install

Get the compilation running in the background

grunt watch

Enjoy!

-- The End --