Scroll-based Animations using jQuery and CSS3

we can provide cool animation effects in page contents easily, where when you scroll down. This provide an interesting and interactive experience for your viewers.

More about Scroll-based Animations ( http://mynameismatthieu.com/WOW/docs.html )

Scroll-based Animations egs:

http://mynameismatthieu.com/WOW/index.html
http://www.web2feel.com/freeby/scroll-effects/index6.html

Here you can find a sample HTML markup for the Scroll-based Animation.

	<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
	<style>
	.wow:first-child {
	visibility: hidden;
	}
	#container {
	width: 980px;
	margin: 0 auto;
	}
	section {
	height: 300px;
	margin: 60px 0;
	}
	.section--purple {
	background-color: #9b59b6;
	}
	.section--blue {
	background-color: #3498db;
	}
	.section--green {
	background-color: #2ecc71;
	}
	#main {
	text-align: center;
	margin-top:100px;
	}
	</style>

view raw scroll-based-animation.css hosted with ❤ by GitHub

	<div id="container">
	<div id="main">
	<section class="wow fadeInUp" style="background-color: #f1c40f;"></section>
	<section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
	<section class="section--purple wow slideInRight" data-wow-delay="2s"></section>
	<section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
	<section class="section--green wow slideInLeft" data-wow-duration="4s" ></section>
	</div>
	</div>