Author: | matthieua |
---|---|
Views Total: | 20,020 views |
Official Page: | Go to website |
Last Update: | May 19, 2016 |
License: | MIT |
Preview:

Description:
WOW.js is an amazing javascript script that takes advantage of CSS3 animations to animate & reveal Html elements when they’re scrolled into view.
Basic Usage:
Load the required animate.css
for CSS3 animations.
<link rel="stylesheet" href="css/libs/animate.css">
Create html elements you want to animate on scroll down.
<div id="main"> <section class="wow fadeInDown"></section> <section class="wow pulse" data-wow-iteration="infinite" data-wow-duration="1500ms"></section> <section class="wow slideInRight" data-wow-delay="2s"></section> <section class="wow bounceInLeft" data-wow-offset="300"></section> <section class="wow slideInLeft" data-wow-duration="4s"></section> </div>
Load the wow.js
at the end of the document so the page load faster.
<script src="dist/wow.js"></script>
Initialization with optional settings.
wow = new WOW( { boxClass: 'wow', animateClass: 'animated', offset: 100 } ); wow.init();
All default options.
var wow = new WOW({ // selector boxClass: 'wow', // animate class animateClass: 'animated', // offset in pixels offset: 0, // triggers animations on mobile devices mobile: true, // acts on asynchronously loaded content live: true, // callback function that will be triggered every time an animation is started callback: function(box) { }, // scroll container selector scrollContainer: null });
How do we set it to animate again when you scroll up ?