[科技]基于html5海賊王單頁視差滾動特效
分享一款基于html5海賊王單頁視差滾動特效是一款流行滑落網頁特效代碼。效果圖如下：
實現的代碼：
<div class="top">
<div class="top_main center">
<ul id="scene" class="scene">
<li class="layer" data-depth="0.10">
<img class=" top_img02" src="images/top_img03.png"></li>
<li class="layer" data-depth="0.40">
<img class=" top_img04" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.60">
<img class=" top_img05" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.90">
<img class=" top_img06" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.20">
<img class=" top_img07" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.60">
<img class=" top_img08" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.40">
<img class=" top_img09" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.10">
<img class=" top_img10" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.60">
<img class=" top_img11" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.50">
<img class=" top_img12" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.40">
<img class=" top_img13" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.20">
<img class=" top_img14" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.10">
<img class=" top_img15" src="images/top_img05.png"></li>
</ul>
<img class="lx01" src="images/lx01.png">
<img class="lx02" src="images/lx02.png">
<img class="lx03" src="images/lx03.png">
<img class="lx04" src="images/lx02.png">
<img class="lx05" src="images/lx03.png">
</div>
<!-- top_main end -->
</div>
<!-- top end -->
<div class="section1">
<div class="sec_c1">
<h1>
關于海賊王</h1>
<hr style="border: 3 double #987cb9; margin-bottom: 40px; box-shadow: 0 0 5px yellow"
width="100%" color="yellow" size="3;">
<p>
航海王（日本尾田榮一郎創作的漫畫）</p>
<p>
擁有財富、名聲、權力，這世界上的一切的男人 “海賊王”哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?？如果想要的話，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。</p>
<p>
時值“大海賊時代”，為了尋找傳說中海賊王羅杰所留下的大秘寶“ONE PIECE”，無數海賊揚起旗幟，互相爭斗。一個叫路飛的少年為了與因救他而斷臂的香克斯的約定而出海，在旅途中不斷尋找志同道合的伙伴，開始了以成為海賊王為目標的偉大冒險旅程</p>
</div>
</div>
<!-- <div class="section2">
<div class="sec_c2">
<h1>人生中有些事你不竭盡所能去做，你永遠不知道你自己有多出色 。</h1>
<p>by.海賊王</p>
</div>
</div> -->
<!-- section2 end -->
<div class="section3">
<div id="carousel_container" class="carousel slide full_height">
<div class="carousel-inner full_height">
<div id="m_01" class="page item active" progress="150">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【船長】“草帽”蒙奇·D·路飛（蒙其·D·魯夫）（モンキーD·ルフィ/Monkey D. Luffy）</p>
<p>
年齡：17歲→19歲（漫畫598話開始的“兩年后”）</p>
<p>
生日：5月5日（日本男孩節）</p>
<p>
星座：金牛座</p>
<p>
身高：172cm，174cm（兩年后）</p>
<p>
故鄉：東海風車村</p>
<p>
身份：草帽海賊團船長/草帽團三主力之一</p>
<p>
喜歡的食物：肉</p>
<p>
愛好：喜歡探險，感興趣于新奇怪異的事物</p>
<p>
身世：革命家蒙奇·D·龍的兒子，海軍中將蒙奇·D·卡普的孫子，波特卡斯·D·艾斯及薩博的義弟。</p>
<p>
惡魔果實：超人系橡膠果實</p>
<p>
霸氣：霸王色霸氣、武裝色霸氣、見聞色霸氣</p>
<p>
懸賞：3千萬（可可亞西村事件）→1億（阿拉巴斯坦事件）→3億（司法島事件)→4億（頂上戰爭后）</p>
<p>
聲優：田中真弓</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<!-- lufi end -->
<div id="m_02" class="page item" progress="300">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【戰斗員】“海賊獵人”羅羅諾亞·索?。_諾亞·卓洛/羅羅諾亞·佐羅）(ロロノア·ゾロ/Roronoa Zoro)</p>
<p>
年齡：19歲→21歲（漫畫598話開始的“兩年后”）</p>
<p>
生日：11月11日</p>
<p>
星座：天蝎座</p>
<p>
身高：178cm，181cm（兩年后）</p>
<p>
故鄉：東海 霜月村</p>
<p>
身份：草帽海賊團劍士/草帽團三主力之一/海賊獵人</p>
<p>
喜歡的食物：白米，海獸的肉，適合下酒的食物</p>
<p>
愛好：睡覺、修煉、喝酒。</p>
<p>
缺點：路癡</p>
<p>
霸氣：武裝色霸氣、見聞色霸氣</p>
<p>
武器：和道一文字（古伊娜的刀）、雪走（在司法島上被吃了銹銹果實的上校銹斷了）、三代鬼徹、黑刀秋水（與武士龍馬戰斗后得到）</p>
<p>
懸賞：6千萬（阿拉巴斯坦事件）→1億2000萬（司法島事件）</p>
<p>
聲優：中井和哉</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_03" class="page item" progress="450">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【航海士】“小賊貓”娜美（奈美）（ナミ/Nami）</p>
<p>
年齡：18歲→20歲（漫畫598話開始的“兩年后”）</p>
<p>
生日：7月3日</p>
<p>
星座：巨蟹座</p>
<p>
身高：169cm，170cm（兩年后）</p>
<p>
故鄉：東?？煽蓙單鞔?lt;/p>
<p>
身份：草帽海賊團航海士</p>
<p>
喜歡的食物：都不錯，但最喜歡橘子</p>
<p>
愛好：錢，橘子，風車，地圖</p>
<p>
特長：繪制地圖，觀測天氣，偷東西</p>
<p>
武器：三截式長棍→天候棒→完全版天候棒（由烏索普所發明）→魔法天候棒（由氣象島學者改良）</p>
<p>
懸賞：1600萬（司法島事件）</p>
<p>
聲優：岡村明美</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_04" class="page item" progress="600">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【狙擊手】烏索普（騙人布/烏索布）（ウソップ/Usopp）</p>
<p>
年齡：17歲→19歲 （漫畫598話開始的“兩年后”）</p>
<p>
生日：4月1日</p>
<p>
星座：白羊座</p>
<p>
身高：174cm,176cm(兩年后)</p>
<p>
故鄉：東海 西羅普村</p>
<p>
身份：烏索普海賊團船長→草帽海賊團狙擊手</p>
<p>
喜歡的食物：秋島的秋刀魚，旺季的魚類</p>
<p>
愛好：發明各種東西、制造武器</p>
<p>
霸氣：見聞色霸氣</p>
<p>
綽號：狙擊王、長鼻子</p>
<p>
武器：彈弓、橡皮筋、鐵錘、大獨角仙（巨型彈弓）、“狙擊王”的面具 、黒兜（魚人島龍宮國戰斗使用</p>
<p>
懸賞：3000萬（以“狙擊王”的身份在司法島事件中）</p>
<p>
聲優：山口勝平</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_05" class="page item" progress="750">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【廚師】“黑足”山治（香吉士/香吉/山智）（サンジ/Sanji）</p>
<p>
年齡：19歲→21歲（兩年后）</p>
<p>
生日：3月2日 （TV版為3月4日）</p>
<p>
星座：雙魚座</p>
<p>
身高：177cm，180cm(兩年后)</p>
<p>
故鄉：北海</p>
<p>
身份：草帽海賊團廚師/草帽團三主力之一</p>
<p>
喜歡的食物：辣味海鮮面，適合紅茶的食物</p>
<p>
愛好：下廚，抽煙，浪漫幻想</p>
<p>
能力：腳技、刀法、烹飪、月步</p>
<p>
霸氣：見聞色霸氣、武裝色霸氣</p>
<p>
綽號：白癡卷眉、廚子、色情廚子、鼻血廚師、海賊A（索隆所?。?，圈圈眉，褶子靚卷眉，好色河童，7號（在兩年后肥皂泡群島索隆叫的 指到集中地點的先后順序，索隆取的），黑足</p>
<p>
懸賞：7700萬（司法島事件）</p>
<p>
聲優：平田廣明/大谷育江（小時候）</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_06" class="page item" progress="900">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【船醫】“愛吃棉花糖的馴鹿”托尼托尼·喬巴（多尼多尼·喬巴）（トニートニーチョッパー/Tony Tony Chopper）</p>
<p>
年齡：15歲→17歲（漫畫598話開始的“兩年后”）</p>
<p>
生日：12月24日</p>
<p>
星座：摩羯座</p>
<p>
身高：因身體變化而變化</p>
<p>
故鄉：偉大航路磁鼓王國（路飛趕走瓦波爾國王后改名櫻花王國）</p>
<p>
身份：草帽海賊團船長/草帽團三主力之一</p>
<p>
身份：草帽海賊團船醫</p>
<p>
喜歡的食物：棉花糖，巧克力，所有甜的食物 綽號：藍鼻子的怪物，喜歡棉花糖的寵物，怪物 惡魔果實：動物系人人果實</p>
<p>
能力：8段變形，現能控制暴走形態需食用藍波球</p>
<p>
懸賞：50貝利（司法島事件）</p>
<p>
聲優：大谷育江</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_07" class="page item" progress="1050">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【考古學家】“惡魔之子”妮可·羅賓（尼可·魯賓）（ニコ·ロビン/Nico Robin）</p>
<p>
年齡：28歲→30歲 （漫畫598話開始的“兩年后”）</p>
<p>
生日：2月6日</p>
<p>
星座：水瓶座</p>
<p>
身高：180cm</p>
<p>
故鄉：西海．考古之島奧哈拉</p>
<p>
身份：草帽海賊團考古學家</p>
<p>
喜歡的食物：三明治，不太甜的蛋糕，適合咖啡的食物</p>
<p>
惡魔果實：超人系花花果實</p>
<p>
懸賞：7900萬貝利（奧哈拉事件）→8000萬貝利（司法島事件）</p>
<p>
聲優：山口由里子</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_08" class="page item" progress="1200">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【船匠】“改造人（鐵人）”弗蘭奇（福蘭奇/佛朗基，原名卡迪·佛蘭姆）（フランキー/Franky）</p>
<p>
年齡：34歲→36歲（漫畫598話開始的“兩年后”）</p>
<p>
生日：3月9日</p>
<p>
星座：雙魚座</p>
<p>
身高：226（改造前），240cm（改造后）</p>
<p>
故鄉：偉大航路·七水之都water seven</p>
<p>
身份：草帽海賊團船匠</p>
<p>
喜歡的食物：漢堡包，炸薯條，搭配可樂的食物</p>
<p>
綽號：人造人，變態</p>
<p>
武器：除了后背外渾身都是武器（因為摸不到后背，兩年后后背也改造了）</p>
<p>
懸賞：4400萬貝利（司法島事件）</p>
<p>
聲優：矢尾一樹/野田順子（小時候）</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
<div id="m_09" class="page item" progress="1350">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>
【音樂家】“鼻歌”&“靈魂之王”布魯克（ブルック/Brook）</p>
<p>
年齡：88歲(50年前38歲) 40歲時戰死，一年后復活。(尾田在SBS的回答是88歲理由同第一句)</p>
→90歲（漫畫598話開始的“兩年后”）
<p>
生日：4月3日</p>
<p>
星座：白羊座</p>
<p>
身高：266CM(帽子約20公分)</p>
<p>
體重：58Kg</p>
<p>
故鄉：西海</p>
<p>
身份：草帽海賊團音樂家/劍士</p>
<p>
愛好：演奏，喝紅茶，牛奶，說骷髏冷笑話</p>
<p>
特長：樂器、劍術</p>
<p>
惡魔果實：超人系黃泉果實</p>
<p>
綽號：靈魂之王，鼻歌</p>
<p>
武器：喪魂之劍（拐杖）</p>
<p>
懸賞：3300萬貝利（50年前）</p>
<p>
聲優：長島雄一</p>
</div>
</div>
<!-- splash end -->
</div>
<!-- main end -->
</div>
</div>
</div>
<div class="sec3_footer">
<div id="navbar">
<div id="dash">
</div>
<div id="progress">
</div>
<div id="navbtns" class="container">
<div class="navbtn">
<a href="javascript:switchPage(0)">
<img src="images/c_01.png">
<div>
<p style="line-height: 20px; color: #fff;">
【船長】<br />
蒙奇·D·路飛</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(1)">
<img src="images/c_02.png">
<div>
<p style="line-height: 20px; color: #fff;">
【戰斗員】<br />
羅羅諾亞·索隆</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(2)">
<img src="images/c_03.png">
<div>
<p style="line-height: 20px; color: #fff;">
【航海士】<br />
娜美</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(3)">
<img src="images/c_04.png">
<div>
<p style="line-height: 20px; color: #fff;">
【狙擊手】<br />
烏索普</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(4)">
<img src="images/c_05.png">
<div>
<p style="line-height: 20px; color: #fff;">
【廚師】<br />
山治</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(5)">
<img src="images/c_06.png">
<div>
<p style="line-height: 20px; color: #fff;">
【船醫】<br />
托尼托尼·喬巴</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(6)">
<img src="images/c_07.png">
<div>
<p style="line-height: 20px; color: #fff;">
【考古學家】<br />
妮可·羅賓</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(7)">
<img src="images/c_08.png">
<div>
<p style="line-height: 20px; color: #fff;">
【船匠】<br />
弗蘭奇</p>
</div>
</a>
</div>
<div class="navbtn">
<a href="javascript:switchPage(8)">
<img src="images/c_09.png">
<div>
<p style="line-height: 20px; color: #fff;">
【音樂家】<br />
布魯克</p>
</div>
</a>
</div>
</div>
</div>
<!-- navbar end -->
</div>
<!-- sec3_footer end -->
</div>