OTHER License
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:
It just take seconds to install and use WOW.js! Read the documentation
bower install wow-mit
npm install wow.js
<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>
new WOW().init();
<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>
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
},
scrollContainer: null // optional scroll container selector, otherwise use window
}
);
wow.init();
In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically
triggered for any DOM nodes you add after calling wow.init()
. If you do not
like that, you can disable this by setting live
to false
.
If you want to support older browsers (e.g. IE9+), as a fallback, you can call
the wow.sync()
method after you have added new DOM elements to animate (but
live
should still be set to true
). Calling wow.sync()
has no side
effects.
The library is transpiled using Babel, please update wow.js
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!
If you find a bug, please report it here on Github!
Originally Developed by Matthieu Aussaguel, mynameismatthieu.com Forked to remain under the MIT license by Thomas Grainger, https://graingert.co.uk
Thanks to everyone who has contributed to the project so far:
Initiated and designed by Vincent Le Moign, @webalys