See the Pen Wow.js & Animate.css
1

Setup wow.js

Link to the CSS animation library

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

Link and activate wow.js

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

Reveal CSS Animations
Make an element revealable
Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it

<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>

You’re done!

Advanced Options

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>

 

Wow.js & Animate.css – Reveal Animations on scroll

| Animation, CSS3, CSS3 Animation, HTML5 | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.