Javascript To Animate Html Elements On Scroll – WOW.js

Category: Animation , Javascript , Recommended | May 19, 2016
Author: matthieua
Views Total: 11,007
Official Page: Go to website
Last Update: May 19, 2016
License: MIT

Preview:

Javascript To Animate Html Elements On Scroll – WOW.js

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 
    
  });

You Might Be Interested In:


One thought on “Javascript To Animate Html Elements On Scroll – WOW.js

Leave a Reply