feh1ks
5/2/2016 - 3:16 AM

WOW.js reveal scroll animations

WOW.js reveal scroll animations

##WOW.js plugin setup

###1. Install

bower install wow
bower install animate.css

###2. Usage

#####2.1 CONNECT JS TO HTML

<!-- Plugins JavaScript -->
<script src="js/wow.min.js"></script>

#####2.2 CONNECT ANIMATE.CSS TO HTML

<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css">

#####2.3 HTML

<section class="reveal fadeInUp">
</section>

#####2.4 HTML PARAMETRS

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

<div class="reveal bounceIn" data-wow-ParametrName="1s">
</div>

#####2.5 JS

// WOW js
var wow = new WOW(
    {
        boxClass: 'reveal',
        mobile:   false,
        offset:   200
    }
);
wow.init();