Reveal Animations When You Scroll with WOW.js

INTRODUCTION

WOW.js is one the best plugin for creating animation in a website. It keep the web element hidden and display them when you scroll down to.with stunning animation. WOW.js works on any website, but it works best on one page type website.

WOW javascript

HOW TO USE

1. Include JS & CSS

WOW.js depends on animate.css to work

<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'>
<script src='https://cdn.rawgit.com/matthieua/WOW/1.0.1/dist/wow.min.js'></script>

2. HTML

<div class="row">
	<div data-wow-delay="0.5s" class="wow rollIn">
		<img src="http://mynameismatthieu.com/WOW/img/wow-3.gif" height="200">
	</div>
	<div data-wow-delay="1s" class="wow bounceInDown center">
		<img src="http://mynameismatthieu.com/WOW/img/wow-4.gif" height="200">
	</div>
	<div data-wow-delay="1.5s" class="wow bounceInRight">
		<img src="http://mynameismatthieu.com/WOW/img/wow-9.gif" height="200">
	</div>
</div>

3. Call WOW.js

<script>
new WOW().init();
</script>

OPTIONS

WOW.js provide maximum options to handle your animation. you can declare animation duration,delay, offset and iteration using following 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

DEMO

RERUN the demo below to see the animation when page loaded

See the Pen wow.js demo by Thanh Nguyen (@genievn) on CodePen.

Recent Post