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



91 363 122



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



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


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 滚动导航菜单 二维码 滚动切换 地图 图片滚动 计算器 文字滚动 计时器 桌面 图片文字滚动 跳转 全屏滚动 步骤 页面滚动 键盘 签到 分享 点赞 投票 雪花 打印 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滚动流动 自动滚动图片轮播 滑动星星打分 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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