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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

227 906 303



特效描述: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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到