WOW.js

Reveal CSS animation as you scroll down a page. By default, you should 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 much heavier 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

LIVE DEMO ➫

Live examples

Version

0.1.3

Documentation

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

Dependencies

animate.css

Basic usage

HTML

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

JavaScript

new WOW().init();

Advanced usage

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

wow = new WOW(
  {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0           // default
  }
)
WOW.init();

Contribute

The library is written in CoffeeScript, please update wow.coffee file.

We use grunt to compile and minify the library:

Install needed libraries

npm install

Get the compilation running in the background

grunt watch

Enjoy!

Bug tracker

If you find a bug, please raise it the issue here on Github!

Developer

Developed by Matthieu Aussaguel, mynameismatthieu.com

Contributors

Thanks to everyone who has contributed to the project so far:

Attila Oláh - @attilaolah - Github Profile

Initiated and designed by Vincent Le Moign, @webalys

dalecreativ/WOW