html5页面滚动图片动画加载特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src="dist/scrollreveal.min.js"></script>

3. HTML代码

	<header class="htmleaf-header">
		<div class="htmleaf-demo center">
		  <a href="index.html" class="current">默认</a>
		  <a href="index2.html">3D效果</a>
		</div>
	</header>
	<div class="container">
		<div class="row fooCont   ainer mt50">
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/1.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/2.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/3.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/4.jpg"></div>
		</div>
		<div class="row fooContainer mt50">
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/5.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/6.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/7.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/8.jpg"></div>
		</div>
		<div id="chocolate" class="row mt50">
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/9.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/10.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/11.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/12.jpg"></div>
		</div>
		<div class="row fooContainer mt50">
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/13.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/14.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/15.jpg"></div>
			<div class="col-md-3 fooReveal"><img class="img-thumbnail" src="img/16.jpg"></div>
		</div>
	</div>
    <script>
      var fooReveal = {
		  delay    : 200,
		  distance : '200px',
		  easing   : 'ease-in-out',
		  rotate   : { z: 10 },
		  scale    : 1.1,
		  reset    : true
		};
		window.sr = ScrollReveal()
		  .reveal( '.fooReveal', fooReveal )
		  .reveal( '#chocolate', { delay: 500, scale: 0.9 ,reset:true } );
  </script>