<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>AniJS ScrollReveal</title>
<head>
<link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css" />
</head>
<body>
<!-- The example -->
<div class="container center">
<p>Just scroll the window ;)</p>
<div class="item orange"
data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal repeat">
<i class="fa fa-behance"></i>
</div>
<div class="item pink"
data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal">
<i class="fa fa-pinterest"></i>
</div>
<div class="item green"
data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal">
<i class="fa fa-dribbble"></i>
</div>
<div class="item blue"
data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal">
<i class="fa fa-dropbox"></i>
</div>
<div class="item orange"
data-anijs="if: scroll, on: window, do: rollIn animated, before: $scrollReveal">
<i class="fa fa-html5"></i>
</div>
<div class="item pink"
data-anijs="if: scroll, on: window, do: bounceIn animated, before: $scrollReveal">
<i class="fa fa-wordpress"></i>
</div>
<div class="item green"
data-anijs="if: scroll, on: window, do: rotateIn animated, before: $scrollReveal">
<i class="fa fa-reddit"></i>
</div>
<div class="item blue"
data-anijs="if: scroll, on: window, do: rubberBand animated, before: $scrollReveal">
<i class="fa fa-umbrella"></i>
</div>
</div>
<!-- End example -->
<script src="http://anijs.github.io/lib/anijs/anijs.js"></script>
<script src="http://anijs.github.io/lib/anijs/helpers/scrollreveal/anijs-helper-scrollreveal.js"></script>
</body>
/*The CSS example*/
.item{
padding: 100px;
color: white;
width: 70px;
text-align: center;
font-size: 3em;
display: inline-block;
margin-right:10px;
margin-top: 10px;
}
.item i{
}
.blue{
background-color: #3498db;
}
.orange{
background-color: #FBB44C;
}
.pink{
background-color: #FC797A;
}
.green{
background-color:#2ABB9B;
}
.container p{
color: #888;
padding: 40px 0;
}
/*End CSS example*/
/*Other CSS*/
body{
font-family: helvetica;
font-size: 1.2em;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
position:relative;
width: 50%;
}
.container{
margin-top: 50px;
}
