jquery html5視差滾動制作頁面視差滾動展示特效



66 261 88



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

加群請備注:從官網了解到

老夫子电子