jquery html5视差滚动制作页面视差滚动展示特效



63 249 84



特效描述:jquery html5视差滚动 页面视差滚动展示,简单的jquery html5页面视差滚动特效代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="js/reset.css">
<link rel="stylesheet" href="js/style.css">

2. 引入JS

<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

  <div id="main" role="main">
	<section id="first" class="story" data-speed="8" data-type="background" style="background-position: 50% 0px;">    	
		<div class="smashinglogo" data-type="sprite" data-offsety="100" data-xposition="50%" data-speed="-2" style="background-position: 50% 100px;">
        <div style="position:absolute; bottom:0; left:50%; padding:10px; color:#FFF; height:200px; font-size:42px">▼</div>
        </div>		
		<article>
			<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242">
			<p><a href="#">版权信息 </a>地址神马的</p>
	    </article>
	</section>
	<section id="second" class="story" data-speed="4" data-type="background" style="background-position: 50% -25px;">
		<article style="color:#bf1c02">
			<h2>美食</h2>
		    	<p>古老的伊斯兰文明,优越的地理环境和富饶的物产资源,为清真饮食文化的扎根生长,打下了良好的物质基础,哺育和造就了宁夏的清真饮食文化体系。</p>
		    	<p>因此,百花齐放,百家争鸣,继承和发扬民族传统,是宁夏清真小吃的显著特点。</p>
		    	<p>世界上目前有三大菜系:东方菜系方菜系和伊斯兰菜系。回族美食兼收并蓄东、伊两大菜系之优点。我国的回族美食由其清真品质所决定讲究品质高洁,选料考究,肉食选取活体宰杀,面食以油炸为主,营养搭配合理,特色鲜明。目前已风靡全国,堪称中国食林奇葩。</p>
		    	<p>宁夏是我国回族聚居最多的省份,也是唯一的一个省级回族自治区。由于受伊斯兰文化影响,宁夏当地的饮食有着独具特色的民族风俗习惯。而清真食品已在全国范围内得到普遍发展。</p>	
		    	<p>银川的回族饮食,兼具中原传统和穆斯林的双重风味,是回族和中华文明融合的结果,这里有着正宗的清真食品和清真菜肴,同时还许多独特回族风味小吃,其品种之多,味道之精美,都充分显示出了回族人民的聪明才智。</p>	
                <p>辣辣英网经政府扶持...依托..背景...采集了银川...庞大的信息库....为您打造银川第一美食信息平台..带领本地市民走向信息化生活</p>	
		</article>
	</section>
	<section id="third" class="story" data-speed="6" data-type="background" data-offsety="250" style="background-position: 50% 50px;">    	
    <div class="photograph" data-type="sprite" data-offsety="1250" data-xposition="25%" data-speed="2" style="background-position: 25% 650px;"></div>
    	<article style="background:#C9F !important; color: #606">
    		<h2>玩乐</h2>
	    	<div class="textbox">    	
		    	<p>辣辣英网,根据商圈、休闲娱乐商户分类系统,为你提供银川1603家娱乐场所商户,包含银川地区娱乐场所商户的电话、地址、周边地图、公交驾乘、点评等...</p>
                <p>辣辣英网,根据商圈、休闲娱乐商户分类系统,为你提供银川1603家娱乐场所商户,包含银川地区娱乐场所商户的电话、地址、周边地图、公交驾乘、点评等...</p>
		    </div>
    	</article>
	</section>	
	<section id="fourth" class="story" data-speed="8" data-type="background" data-offsety="250" style="background-position: 50% -25px;">
    	<article style="color:#333; background:#29c6d9; padding:20px; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); ">
    		<h2>旅游</h2>
	    	<div class="textbox">    	
		    	<p>银川市人文景观独具特色。浓郁的回乡风情,雄浑的大漠风光,秀丽的塞上水色,古老的黄河文明,神秘的西夏文化,构成了银川多姿多彩的旅游资源。悠久的历史,给银川留下了许多珍贵的文化遗产,珍存了古城池、清真寺、佛塔、古长城等60多处名胜古迹,以及高山、大漠、黄河、草原等多种自然景观,呈现出田园如织、沟渠纵横的水乡景色与大漠孤烟、长河落日的塞北苍凉交相辉映的奇异景观,孕育出奇特、古老、雄浑、秀丽、浩瀚、神秘的多重旅游风貌,荣获中国优秀旅游城市称号。远古时期刻凿的贺兰山岩画见证了原始社会的人类迁徙历史;灵武水洞沟古人类文化遗址是中华史前文明的缩影;神秘奇特的西夏王陵被海外誉为"东方的金字塔";华夏西部影视城——镇北堡诞生了《红高粱》等上百部影视片,使中国电影从这里走向了世界。灿烂的人文景观,独特的民族饮食文化,鲜明的回乡都市风采,使银川当之无愧地成为中国回族之乡。</p>
		    </div>
    	</article>
		<video controls width="640" data-type="video" data-offsety="2400" data-speed="1.5" style="top:933.3333333333333px;">
			<source src="video/mov_bbb.ogv" type="video/ogg">
			<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/MP4">
			<source src="video/mov_bbb.webm" type="video/webm">
		</video>
	</section>	
	<section id="five" class="story" data-speed="10" data-type="background" data-offsety="250" style="background-position: 50% 50px;">    	
    <div class="photograph" data-type="sprite" data-offsety="2250" data-xposition="25%" data-speed="2" style="background-position: 25% 650px;"></div>
    	<article style="background:#FC3; color:#066">
    		<h2>家政</h2>
	    	<div class="textbox">    	
		    	<p>辣辣英网,根据商圈、休闲娱乐商户分类系统,为你提供银川1603家娱乐场所商户,包含银川地区娱乐场所商户的电话、地址、周边地图、公交驾乘、点评等...</p>
                <p>辣辣英网,根据商圈、休闲娱乐商户分类系统,为你提供银川1603家娱乐场所商户,包含银川地区娱乐场所商户的电话、地址、周边地图、公交驾乘、点评等...</p>
		    </div>
    	</article>
	</section>	
	<section id="theend" class="story" data-speed="8" data-type="background" data-offsety="250" style="background-position: 50% -150px;">    	
		<div class="byebye" data-type="sprite" data-offsety="-2200" data-xposition="50%" data-speed="-2" style="background-position: 50% 0px;"></div>	
	</section>
  </div> 



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 滑动星星打分 其他 全屏滚动 播放器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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