Skip to content

loekup/WOW

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WOW.js Build Status

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

Live examples

Version

0.1.6

Documentation

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

Dependencies

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
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 (true is 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 report it here on Github!

Developer

Developed by Matthieu Aussaguel, mynameismatthieu.com

Contributors

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

Initiated and designed by Vincent Le Moign, @webalys

About

Reveal CSS animation as you scroll down a page

Resources

License

Stars

Watchers

Forks

Packages

No packages published