Wow library

Essentials

Full documentation here.

1. Link to animate.css:

   <link rel="stylesheet" href="css/animate.css">

2. Link to wow.js - just before the end of body - and call the library to initialize.

   
   <script src="js/wow.min.js"></script>
   <script>
       new WOW().init();
   </script>
   

3. Add class 'wow' to an element to make it revealable.
4. In addition, add the desired effect also as a class - see the selectors in animate.css for available effects.
5. Optionally, specify advanced options as attributes on the element(s):

   
   data-wow-duration: Change the animation duration
   data-wow-delay: Delay before the animation starts
   data-wow-offset: Distance to start the animation (related to the browser bottom)
   data-wow-iteration: Number of times the animation is repeated
   

6. Also optionally, specify settings when initializing the WOW object:

   
   wow = new WOW({
       boxClass: 'wow', // default
       animateClass: 'animated', // default
       offset: 0, // default
       mobile: true, // default
       live: true // default
   })
   /*
   boxClass: Class name that reveals the hidden box when user scrolls.
   animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
   offset: Define the distance between the bottom of browser viewport and the top of hidden box.
           When the user scrolls and reach this distance the hidden box is revealed.
   mobile: Turn on/off wow.js on mobile devices.
   live: consatantly check for new WOW elements on the page.
   */