Download
User Rating: 2/5 ( 4 votes)
WOW.js - 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:
-
Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
-
Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
-
Fast execution and lightweight code: the browser will like it ;-)
-
You can change the settings
Source: mynameismatthieu.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script>
2. HTML
Make an element revealable
Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
(You can change this CSS class in the WOW settings to avoid name conflicts.)
<div class="wow">
Content to Reveal Here
</div>
Choose the animation style
Pick an animation style in Animate.css , then add the CSS class to the HTML element
<div class="wow bounceInUp">
Content to Reveal Here
</div>
3. JAVASCRIPT
new WOW().init();
4. OPTIONS
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.
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true // default
}
)
wow.init();
5. ADVANCED ATTRIBUTES
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
<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>
JS Tutorial
