<!DOCTYPE html>
<html>
<head>
<title>Reveal Animations When Scrolling — WOW.js</title>
<meta name="description" content="WOW.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.">
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/style.css">
<link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
<link rel="author" href="https://plus.google.com/u/0/105983066516923168596/posts" />
<link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
<style type="text/css">
.top-banner {
background-color: #666;
}
</style>
</head>
<body>
<div class="content">
<div class="container-gray">
<div class="container">
<div class="row small center wow fadeInDown top__element" data-wow-delay="0.5s">
<div class="span2 offset4">
<a href="http://www.materialup.com/" target="_blank" title="Daily Material Design Inspiration - MaterialUp">Live Demo</a>
</div>
<div class="span2">
<a href="docs.html">How to use? </a>
</div>
<div class="span2">
<a target="_blank" href="https://github.com/matthieua/WOW">Github</a>
</div>
<div class="span2">
<a target="_blank" href="https://twitter.com/mattaussaguel" title="Matt Aussaguel">@mattaussaguel </a>
</div>
</div>
</div>
</div>
<div class="container-white">
<div class="container">
<div class="row">
<div class="span12 center"><img src="http://mynameismatthieu.com/WOW/img/wow-logo.jpg" height="177" data-wow-iteration="3" data-wow-duration="0.15s" class="wow pulse">
<h2 data-wow-duration="0.5s" class="wow bounceInDown">
Reveal Animations When You Scroll. Very <a target="_blank" href="http://daneden.github.io/animate.css/" title="Animate.css">Animate.css </a>Friend :-)
<br>
Easily customize animation settings: style, delay, length, offset, iterations...
</h2>
</div>
</div>
</div>
</div>
<div class="container-white">
<div class="container circles">
<div class="row">
<div data-wow-delay="0.5s" class="span3 wow rollIn">
<p class="circle bg-green">such easy</p>
</div>
<div data-wow-delay="0.5s" class="span3 wow bounceInDown center"><img src="http://mynameismatthieu.com/WOW/img/wow-1.gif" height="200" class="wow"></div>
<div data-wow-delay="0.5s" class="span3 wow lightSpeedIn">
<p class="circle bg-yellow">very JS </p>
</div>
</div>
<div class="row">
<div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-3.gif" height="200"></div>
<div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow pulse">
<p class="circle bg-blue">WOW </p>
</div>
<div class="span3 wow bounceInRight center"><img src="http://mynameismatthieu.com/WOW/img/wow-12.gif" height="200"></div>
</div>
<div class="row">
<div class="span3 wow bounceInLeft">
<p class="circle bg-red">no jquery</p>
</div>
<div class="span3 wow flipInX center"><img src="http://mynameismatthieu.com/WOW/img/wow-2.gif" height="200"></div>
<div class="span3 wow bounceInRight">
<p class="circle bg-purple">many anims </p>
</div>
</div>
<div class="row">
<div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-5.gif" height="200"></div>
<div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow shake">
<p class="circle bg-yellow">aint joke</p>
</div>
<div data-wow-iteration="2" class="span3 wow swing center"> <img src="http://mynameismatthieu.com/WOW/img/wow-6.gif" height="200"></div>
</div>
<div class="row">
<div class="span3 wow rollIn">
<p class="circle bg-purple">how small</p>
</div>
<div data-wow-delay="0.5s" class="span3 wow bounceInUp center"><img src="http://mynameismatthieu.com/WOW/img/wow-10.gif" height="200"></div>
<div data-wow-delay="0.5s" data-wow-duration="0.15s" class="span3 wow lightSpeedIn">
<p class="circle bg-green">3 kb only </p>
</div>
</div>
<div class="row">
<div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-7.gif" height="200"></div>
<div data-wow-iteration="5" data-wow-duration="0.25s" class="span3 wow pulse">
<p class="circle bg-blue">just scroll</p>
</div>
<div class="span3 wow lightSpeedIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-9.gif" height="200"></div>
</div>
<div class="row">
<div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow bounce">
<p class="circle bg-yellow">reveal now</p>
</div>
<div class="span3 wow bounceInUp center"><img src="http://mynameismatthieu.com/WOW/img/wow-8.gif" height="200"></div>
<div class="span3 wow bounceInRight">
<p class="circle bg-red">so impress</p>
</div>
</div>
<div class="row">
<div class="span3 wow rollIn center"><img src="http://mynameismatthieu.com/WOW/img/wow-4.gif" height="200"></div>
<div data-wow-iteration="5" data-wow-duration="0.15s" class="span3 wow flip">
<p class="circle bg-green">WOW</p>
</div>
<div class="span3 wow bounceInRight center"><img src="http://mynameismatthieu.com/WOW/img/wow-11.gif" height="200"></div>
</div>
<div class="row">
<div data-wow-delay="0.5s" class="span3 wow rollIn">
<p class="circle bg-red">no jquery?!</p>
</div>
<div data-wow-delay="1s" class="span3 wow bounceInDown center"><img src="http://mynameismatthieu.com/WOW/img/grumpy.gif" height="200"></div>
<div data-wow-delay="1.5s" class="span3 wow bounceInRight">
<p class="circle bg-purple">that sucks! </p>
</div>
</div>
</div>
</div>
<div class="container-white">
<div class="container">
<div class="row">
<div class="span12 center">
<h2>Made and used by <a href="http://www.materialup.com/" target="_blank">materialup.com</a>:</h2>
<p>
<div class="wow zoomIn" data-wow-duration="1s" data-wow-offset="100">
<div class="wow tada" data-wow-delay="1s" data-wow-duration="1s">
<div class="wow rubberBand" data-wow-delay="2000ms" data-wow-duration="1s">
<div class="wow pulse" data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-duration="2s">
<a href="http://www.materialup.com/" title="Daily Material Design Inspiration - MaterialUp" target="_blank">
<img src="http://mynameismatthieu.com/WOW/img/materialup-logo-circle.png" alt="MaterialUp" class="center">
</a>
</div>
</div>
</div>
</p>
</div>
<div class="span12 center">
<h2>See WOW.js revealing animations on these websites:</h2>
<p>
<a target="_blank" href="http://www.materialup.com" title="MaterialUp - Material Design Gallery">* MaterialUp *</a>
<br>
<a target="_blank" href="https://www.fliplingo.com/" title="Fliplingo - Automated translation on Twitter">* Fliplingo *</a>
<br>
<a href="http://www.microsoft.com/en-us/news/stories/garage/" title="Microsoft Stories" target="_blank">* Microsoft Stories *</a>
<br>
<a href="http://www.streamlineicons.com/" title="Streamline Icons" target="_blank">* Streamline Icons *</a>
<br>
<a href="http://popcorn-time.se
