以下是 html5海贼王单页视差滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html5海贼王单页视差滚动特效</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/datouwang.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/munbers.js"></script>
</head>
<body>
<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>故乡：东海可可亚西村</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><!-- section3 end -->
<script src="js/parallax.min.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>
JS代码(munbers.js):
$(document).ready(function(){
$('.carousel').carousel({
"pause":"false","interval":10000}
);
$('.carousel').on('slide.bs.carousel',function (event){
var tag = $(event.relatedTarget).attr("tag");
var progress = $(event.relatedTarget).attr("progress");
$("#progress").animate({
width:progress,left:(progress/150)+150}
,500);
playAnimation(tag);
}
);
$("body,html").animate({
scrollTop:($("#page_home .splash-container").offset().top)}
,10);
playAnimation("home");
}
);
function switchPage(pageIndex){
$('.carousel').carousel(pageIndex);
}
function playAnimation(tag){
var ani1 = $("#page_" + tag + " .ani_step_1");
var ani2 = $("#page_" + tag + " .ani_step_2");
var ani3 = $("#page_" + tag + " .ani_step_3");
var pre_start = ((tag == "home") ? 0:300);
if(ani1 != null){
ani1.css("opacity",0);
setTimeout(function(){
ani1.animate({
opacity:1}
,1000);
}
,10 + pre_start);
}
if(ani2 != null){
ani2.css("opacity",0);
setTimeout(function(){
ani2.animate({
opacity:1}
,1000);
}
,1500 + pre_start);
}
if(ani3 != null){
ani3.css("opacity",0);
setTimeout(function(){
$("#page_" + tag + " .ani_step_3").animate({
opacity:1}
,1000);
}
,3000 + pre_start);
}
}
JS代码(parallax.min.js):
!function(t,i,e){
"use strict";
function s(t,i){
this.element=t,this.layers=t.getElementsByClassName("layer");
var e={
calibrateX:this.data(this.element,"calibrate-x"),calibrateY:this.data(this.element,"calibrate-y"),invertX:this.data(this.element,"invert-x"),invertY:this.data(this.element,"invert-y"),limitX:this.data(this.element,"limit-x"),limitY:this.data(this.element,"limit-y"),scalarX:this.data(this.element,"scalar-x"),scalarY:this.data(this.element,"scalar-y"),frictionX:this.data(this.element,"friction-x"),frictionY:this.data(this.element,"friction-y"),originX:this.data(this.element,"origin-x"),originY:this.data(this.element,"origin-y")}
;
for(var s in e)null===e[s]&&delete e[s];
this.extend(this,r,i,e),this.calibrationTimer=null,this.calibrationFlag=!0,this.enabled=!1,this.depths=[],this.raf=null,this.bounds=null,this.ex=0,this.ey=0,this.ew=0,this.eh=0,this.ecx=0,this.ecy=0,this.erx=0,this.ery=0,this.cx=0,this.cy=0,this.ix=0,this.iy=0,this.mx=0,this.my=0,this.vx=0,this.vy=0,this.onMouseMove=this.onMouseMove.bind(this),this.onDeviceOrientation=this.onDeviceOrientation.bind(this),this.onOrientationTimer=this.onOrientationTimer.bind(this),this.onCalibrationTimer=this.onCalibrationTimer.bind(this),this.onAnimationFrame=this.onAnimationFrame.bind(this),this.onWindowResize=this.onWindowResize.bind(this),this.initialise()}
var n="Parallax",o=30,r={
relativeInput:!1,clipRelativeInput:!1,calibrationThreshold:100,calibrationDelay:500,supportDelay:500,calibrateX:!1,calibrateY:!0,invertX:!0,invertY:!0,limitX:!1,limitY:!1,scalarX:10,scalarY:10,frictionX:.1,frictionY:.1,originX:.5,originY:.5}
;
s.prototype.extend=function(){
if(arguments.length>1)for(var t=arguments[0],i=1,e=arguments.length;
e>i;
i++){
var s=arguments[i];
for(var n in s)t[n]=s[n]}
}
,s.prototype.data=function(t,i){
return this.deserialize(t.getAttribute("data-"+i))}
,s.prototype.deserialize=function(t){
return"true"===t?!0:"false"===t?!1:"null"===t?null:!isNaN(parseFloat(t))&&isFinite(t)?parseFloat(t):t}
,s.prototype.camelCase=function(t){
return t.replace(/-+(.)?/g,function(t,i){
return i?i.toUpperCase():""}
)}
,s.prototype.transformSupport=function(s){
for(var n=i.createElement("div"),o=!1,r=null,a=!1,h=null,l=null,p=0,c=this.vendors.length;
c>p;
p++)if(null!==this.vendors[p]?(h=this.vendors[p][0]+"transform",l=this.vendors[p][1]+"Transform"):(h="transform",l="transform"),n.style[l]!==e){
o=!0;
break}
switch(s){
case"2D":a=o;
break;
case"3D":if(o){
var m=i.body||i.createElement("body"),u=i.documentElement,y=u.style.overflow;
i.body||(u.style.overflow="hidden",u.appendChild(m),m.style.overflow="hidden",m.style.background=""),m.appendChild(n),n.style[l]="translate3d(1px,1px,1px)",r=t.getComputedStyle(n).getPropertyValue(h),a=r!==e&&r.length>0&&"none"!==r,u.style.overflow=y,m.removeChild(n)}
}
return a}
,s.prototype.ww=null,s.prototype.wh=null,s.prototype.wcx=null,s.prototype.wcy=null,s.prototype.wrx=null,s.prototype.wry=null,s.prototype.portrait=null,s.prototype.desktop=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),s.prototype.vendors=[null,["-webkit-","webkit"],["-moz-","Moz"],["-o-","O"],["-ms-","ms"]],s.prototype.motionSupport=!!t.DeviceMotionEvent,s.prototype.orientationSupport=!!t.DeviceOrientationEvent,s.prototype.orientationStatus=0,s.prototype.transform2DSupport=s.prototype.transformSupport("2D"),s.prototype.transform3DSupport=s.prototype.transformSupport("3D"),s.prototype.propertyCache={
}
,s.prototype.initialise=function(){
this.transform3DSupport&&this.accelerate(this.element);
var i=t.getComputedStyle(this.element);
"static"===i.getPropertyValue("position")&&(this.element.style.position="relative"),this.updateLayers(),this.updateDimensions(),this.enable(),this.queueCalibration(this.calibrationDelay)}
,s.prototype.updateLayers=function(){
this.layers=this.element.getElementsByClassName("layer"),this.depths=[];
for(var t=0,i=this.layers.length;
i>t;
t++){
var e=this.layers[t];
this.transform3DSupport&&this.accelerate(e),e.style.position=t?"absolute":"relative",e.style.display="block",e.style.left=0,e.style.top=0,this.depths.push(this.data(e,"depth")||0)}
}
,s.prototype.updateDimensions=function(){
this.ww=t.innerWidth,this.wh=t.innerHeight,this.wcx=this.ww*this.originX,this.wcy=this.wh*this.originY,this.wrx=Math.max(this.wcx,this.ww-this.wcx),this.wry=Math.max(this.wcy,this.wh-this.wcy)}
,s.prototype.updateBounds=function(){
this.bounds=this.element.getBoundingClientRect(),this.ex=this.bounds.left,this.ey=this.bounds.top,this.ew=this.bounds.width,this.eh=this.bounds.height,this.ecx=this.ew*this.originX,this.ecy=this.eh*this.originY,this.erx=Math.max(this.ecx,this.ew-this.ecx),this.ery=Math.max(this.ecy,this.eh-this.ecy)}
,s.prototype.queueCalibration=function(t){
clearTimeout(this.calibrationTimer),this.calibrationTimer=setTimeout(this.onCalibrationTimer,t)}
,s.prototype.enable=function(){
this.enabled||(this.enabled=!0,this.orientationSupport?(this.portrait=null,t.addEventListener("deviceorientation",this.onDeviceOrientation),setTimeout(this.onOrientationTimer,this.supportDelay)):(this.cx=0,this.cy=0,this.portrait=!1,t.addEventListener("mousemove",this.onMouseMove)),t.addEventListener("resize",this.onWindowResize),this.raf=requestAnimationFrame(this.onAnimationFrame))}
,s.prototype.disable=function(){
this.enabled&&(this.enabled=!1,this.orientationSupport?t.removeEventListener("deviceorientation",this.onDeviceOrientation):t.removeEventListener("mousemove",this.onMouseMove),t.removeEventListener("resize",this.onWindowResize),cancelAnimationFrame(this.raf))}
,s.prototype.calibrate=function(t,i){
this.calibrateX=t===e?this.calibrateX:t,this.calibrateY=i===e?this.calibrateY:i}
,s.prototype.invert=function(t,i){
this.invertX=t===e?this.invertX:t,this.invertY=i===e?this.invertY:i}
,s.prototype.friction=function(t,i){
this.frictionX=t===e?this.frictionX:t,this.frictionY=i===e?this.frictionY:i}
,s.prototype.scalar=function(t,i){
this.scalarX=t===e?this.scalarX:t,this.scalarY=i===e?this.scalarY:i}
,s.prototype.limit=function(t,i){
this.limitX=t===e?this.limitX:t,this.limitY=i===e?this.limitY:i}
,s.prototype.origin=function(t,i){
this.originX=t===e?this.originX:t,this.originY=i===e?this.originY:i}
,s.prototype.clamp=function(t,i,e){
return t=Math.max(t,i),t=Math.min(t,e)}
,s.prototype.css=function(t,i,s){
var n=this.propertyCache[i];
if(!n)for(var o=0,r=this.vendors.length;
r>o;
o++)if(n=null!==this.vendors[o]?this.camelCase(this.vendors[o][1]+"-"+i):i,t.style[n]!==e){
this.propertyCache[i]=n;
break}
t.style[n]=s}
,s.prototype.accelerate=function(t){
this.css(t,"transform","translate3d(0,0,0)"),this.css(t,"transform-style","preserve-3d"),this.css(t,"backface-visibility","hidden")}
,s.prototype.setPosition=function(t,i,e){
i+="px",e+="px",this.transform3DSupport?this.css(t,"transform","translate3d("+i+","+e+",0)"):this.transform2DSupport?this.css(t,"transform","translate("+i+","+e+")"):(t.style.left=i,t.style.top=e)}
,s.prototype.onOrientationTimer=function(){
this.orientationSupport&&0===this.orientationStatus&&(this.disable(),this.orientationSupport=!1,this.enable())}
,s.prototype.onCalibrationTimer=function(){
this.calibrationFlag=!0}
,s.prototype.onWindowResize=function(){
this.updateDimensions()}
,s.prototype.onAnimationFrame=function(){
this.updateBounds();
var t=this.ix-this.cx,i=this.iy-this.cy;
(Math.abs(t)>this.calibrationThreshold||Math.abs(i)>this.calibrationThreshold)&&this.queueCalibration(0),this.portrait?(this.mx=this.calibrateX?i:this.iy,this.my=this.calibrateY?t:this.ix):(this.mx=this.calibrateX?t:this.ix,this.my=this.calibrateY?i:this.iy),this.mx*=this.ew*(this.scalarX/100),this.my*=this.eh*(this.scalarY/100),isNaN(parseFloat(this.limitX))||(this.mx=this.clamp(this.mx,-this.limitX,this.limitX)),isNaN(parseFloat(this.limitY))||(this.my=this.clamp(this.my,-this.limitY,this.limitY)),this.vx+=(this.mx-this.vx)*this.frictionX,this.vy+=(this.my-this.vy)*this.frictionY;
for(var e=0,s=this.layers.length;
s>e;
e++){
var n=this.layers[e],o=this.depths[e],r=this.vx*o*(this.invertX?-1:1),a=this.vy*o*(this.invertY?-1:1);
this.setPosition(n,r,a)}
this.raf=requestAnimationFrame(this.onAnimationFrame)}
,s.prototype.onDeviceOrientation=function(t){
if(!this.desktop&&null!==t.beta&&null!==t.gamma){
this.orientationStatus=1;
var i=(t.beta||0)/o,e=(t.gamma||0)/o,s=this.wh>this.ww;
this.portrait!==s&&(this.portrait=s,this.calibrationFlag=!0),this.calibrationFlag&&(this.calibrationFlag=!1,this.cx=i,this.cy=e),this.ix=i,this.iy=e}
}
,s.prototype.onMouseMove=function(t){
var i=t.clientX,e=t.clientY;
!this.orientationSupport&&this.relativeInput?(this.clipRelativeInput&&(i=Math.max(i,this.ex),i=Math.min(i,this.ex+this.ew),e=Math.max(e,this.ey),e=Math.min(e,this.ey+this.eh)),this.ix=(i-this.ex-this.ecx)/this.erx,this.iy=(e-this.ey-this.ecy)/this.ery):(this.ix=(i-this.wcx)/this.wrx,this.iy=(e-this.wcy)/this.wry)}
,t[n]=s}
(window,document),function(){
for(var t=0,i=["ms","moz","webkit","o"],e=0;
e<i.length&&!window.requestAnimationFrame;
++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];
window.requestAnimationFrame||(window.requestAnimationFrame=function(i){
var e=(new Date).getTime(),s=Math.max(0,16-(e-t)),n=window.setTimeout(function(){
i(e+s)}
,s);
return t=e+s,n}
),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){
clearTimeout(t)}
)}
();
CSS代码(main.css):
html,body{text-shadow:0 0 5px yellow;width:100%;height:100%;background-color:#172419;font-family:'Microsoft YaHei',sans-serif !important;color:#fff;}
.center{width:990px;margin:0 auto;}
.top{width:100%;height:556px;background:url(../images/top_bg.jpg) repeat-x left top;background-attachment:fixed;overflow:hidden;position:relative;}
.top_main{width:100%;height:588px;background:url(../images/top_img01.jpg) no-repeat center top;background-attachment:fixed;}
.top_main ul li{position:relative;}
.top_main ul li img.top_img02{position:absolute;left:70px;top:50px;}
.top_main ul li img.top_img04{position:absolute;left:305px;top:174px;}
.top_main ul li img.top_img05{position:absolute;left:1190px;top:105px;}
.top_main ul li img.top_img06{position:absolute;left:100px;top:245px;}
.top_main ul li img.top_img07{position:absolute;left:1415px;top:165px;}
.top_main ul li img.top_img08{position:absolute;left:1250px;top:865px;}
.top_main ul li img.top_img09{position:absolute;left:120px;top:200px;}
.top_main ul li img.top_img10{position:absolute;left:336px;top:200px;}
.top_main ul li img.top_img11{position:absolute;left:300px;top:28px;}
.top_main ul li img.top_img12{position:absolute;left:620px;top:1060px;}
.top_main ul li img.top_img13{position:absolute;left:1540px;top:210px;}
.top_main ul li img.top_img14{position:absolute;left:200px;top:1040px;}
.top_main ul li img.top_img15{position:absolute;left:2006px;top:150px;}
.top_main ul li img.top_img03,.top_main ul li img.top_img13,.top_main ul li img.top_img04{-moz-animation:my_01 .5s ease infinite;-o-animation:my_01 .5s ease infinite;-webkit-animation:my_01 .5s ease infinite;-ms-animation:my_01 .5s ease infinite;animation:my_01 .5s ease infinite;}
.top_main ul li img.top_img06,.top_main ul li img.top_img07,.top_main ul li img.top_img11{-moz-animation:my_01 .9s ease infinite;-o-animation:my_01 .9s ease infinite;-webkit-animation:my_01 .9s ease infinite;-ms-animation:my_01 .9s ease infinite;animation:my_01 .9s ease infinite;}
@-moz-keyframes my_01{0%{-moz-transform:scasle(2);opacity:1;}
100%{-moz-transform:scale(1);opacity:0;}
}
@-o-keyframes my_01{0%{-moz-transform:scasle(2);opacity:1;}
100%{-moz-transform:scale(1);opacity:0;}
}
@-webkit-keyframes my_01{0%{-moz-transform:scasle(2);opacity:1;}
100%{-moz-transform:scale(1);opacity:0;}
}
@-ms-keyframes my_01{0%{-moz-transform:scasle(2);opacity:1;}
100%{-moz-transform:scale(1);opacity:0;}
}
@keyframes my_01{0%{-moz-transform:scasle(2);opacity:1;}
100%{-moz-transform:scale(1);opacity:0;}
}
.lx01,.lx02,.lx03,.lx04,.lx05,.lx06{position:absolute;}
.lx01{right:245px;top:-39px;}
.lx02{right:10px;top:-45px;}
.lx03{right:-72px;top:-20px;}
.lx04{right:265px;top:-39px;}
.lx05{right:20px;top:-45px;}
.lx06{right:-92px;top:-20px;}
.lx01{-moz-animation:my_02 3.5s ease infinite;-o-animation:my_02 3.5s ease infinite;-webkit-animation:my_02 3.5s ease infinite;-ms-animation:my_02 3.5s ease infinite;animation:my_02 3.5s ease infinite;}
.lx02{-moz-animation:my_02 2.5s ease infinite;-o-animation:my_02 2.5s ease infinite;-webkit-animation:my_02 2.5s ease infinite;-ms-animation:my_02 2.5s ease infinite;animation:my_02 2.5s ease infinite;}
.lx03{-moz-animation:my_02 4.5s ease infinite;-o-animation:my_02 4.5s ease infinite;-webkit-animation:my_02 4.5s ease infinite;-ms-animation:my_02 4.5s ease infinite;animation:my_02 4.5s ease infinite;}
.lx04{-moz-animation:my_02 6.0s ease infinite;-o-animation:my_02 6.0s ease infinite;-webkit-animation:my_02 6.0s ease infinite;-ms-animation:my_02 6.0s ease infinite;animation:my_02 6.0s ease infinite;}
.lx05{-moz-animation:my_02 7.5s ease infinite;-o-animation:my_02 7.5s ease infinite;-webkit-animation:my_02 7.5s ease infinite;-ms-animation:my_02 7.5s ease infinite;animation:my_02 7.5s ease infinite;}
@-moz-keyframes my_02{0%{opacity:1;}
100%{opacity:0;-moz-transform:translate(-500px,300px);}
}
@-o-keyframes my_02{0%{opacity:1;}
100%{opacity:0;-o-transform:translate(-500px,300px);}
}
@-webkit-keyframes my_02{0%{opacity:1;}
100%{opacity:0;-webkit-transform:translate(-500px,300px);}
}
@-ms-keyframes my_02{0%{opacity:1;}
100%{opacity:0;-ms-transform:translate(-500px,300px);}
}
@keyframes my_02{0%{opacity:1;}
100%{opacity:0;transform:translate(-500px,300px);}
}
.section1{width:100%;height:500px;background-color:#070301;color:#fff;}
.section1 .sec_c1{width:990px;margin-left:auto;margin-right:auto;overflow:hidden;text-align:center;}
.section1 .sec_c1 h1{font-size:46px;line-height:150px;font-weight:bold;}
.section1 .sec_c1 p{font-size:16px;line-height:25px;padding-bottom:16px;text-shadow:0 0 5px yellow;}
/*.section2{height:400px;width:100%;z-index:1;background:url(../images/big_bg01.jpg) no-repeat left top fixed;background-size:100% 100%;}
.section2 .sec_c2{padding-top:250px;}
.section2 .sec_c2 h1{font-size:46px;text-align:center;text-shadow:1px 1px 15px blue;}
.section2 .sec_c2 p{text-align:right;font-size:24px;padding-right:50px;text-shadow:0 0 5px blue;}
*/
.section3{height:850px;position:relative;}
.section3 a:link,.section3 a:hover{text-decoration:none;outline:none;}
.section3 a:visited{text-decoration:none;}
#m_01,#m_03,#m_05,#m_07,#m_09{background-color:#a53817;color:#fff;}
#m_02,#m_04,#m_06,#m_08{background-color:#a13c1e;color:#fff;}
.section4{}
分享到QQ
分享到微博
微信扫一扫
