Link to
Animate.css
(You can link to another CSS animation library by changing
WOW.js settings)
<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
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>
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>
Now your animations will be revealed when the user scrolls.
Check these examples of WOW.js + Animate.css uses:
* MaterialUp
* Streamline Icons
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>
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.
wow = new WOW( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // default mobile: true, // default live: true // default } ) wow.init();
Developed by Matt Delac – Initiated & Designed by Webalys
Contributed by Attila Oláh
CSS animations powered by WOW.js and Animate.css