特效描述:html5页面滚动 图片动画加载特效。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>