DIR : /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit12/index.js /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit12 (function(){ var main = { anime : 0, loaded:function(){ main.init(); img.imgLoading(); }, init:function(){ //初期処理 main.$btnStart = $("#btnStart"); main.$btnReset = $("#btnReset"); main.$bg1 = $("#bg1"); main.$bg2 = $("#bg2"); main.$cube = $("#cube"); main.$cube1 = $("#cube1"); main.$cube2 = $("#cube2"); main.$cube3 = $("#cube3"); main.$cube4 = $("#cube4"); main.$home_logo = $("#home_logo"); main.$away_logo = $("#away_logo"); main.$tournament = $("#tournament"); main.$daihyou = $("#daihyou"); main.$shiai = $("#shiai"); main.$firework1 = $("#firework1"); main.$firework2 = $("#firework2"); main.$over = $("#over"); main.$cube_h = $("#cube_h"); main.$cube_h1 = $("#cube_h1"); main.$cube_h3 = $("#cube_h3"); main.$cube_a = $("#cube_a"); main.$cube_a1 = $("#cube_a1"); main.$line = $("#line"); main.$fight = $("#fight"); main.cloud = []; main.crTrmLine(50,20,20); main.crTrmRedLine(50,20,20,700); main.crTrmRedLine2(40,20,20,70,1100); main.crTrmLine(50,20,140); main.crTrmRedLine(50,20,140,700); main.crTrmRedLine2(40,20,140,0,1100); main.crTrmLine(50,20,260); main.crTrmRedLine(50,20,260,700); main.crTrmRedLine2(40,20,260,0,1100); main.crTrmLine(50,20,380); main.crTrmRedLine(50,20,380,700); main.crTrmRedLine2(40,20,380,70,1100); main.crTrmLine(110,180,50); main.crTrmRedLine(110,180,50,1300); main.crTrmRedLine2(70,180,50,130,1700); main.crTrmLine(110,180,290); main.crTrmRedLine(110,180,290,1300); main.crTrmRedLine2(70,180,290,0,1700); main.crTrmLine(230,340,110); main.crTrmRedLine(230,340,110,1900); setTimeout(function(){ main.$daihyou.css({"opacity":"1","-webkit-transform":"scale(0.5)"}); main.$shiai.css({"opacity":"1","-webkit-transform":"scale(0.5)"}).on("webkitTransitionEnd",function(e){ main.$shiai.off("webkitTransitionEnd"); main.$firework1.css({"opacity":"1","top":"30%","-webkit-transform":"scale(1)"}).on("webkitTransitionEnd",function(e){ main.$firework1.off("webkitTransitionEnd"); main.setAn('over_f',0,500,main.$over); main.$firework1.css({"-webkit-transition":"all 1200ms ease-in","opacity":"0","top":"50%","-webkit-transform":"scale(1.5)"}); main.$firework2.css({"opacity":"1","top":"10%","-webkit-transform":"scale(1)"}).on("webkitTransitionEnd",function(e){ main.$firework2.off("webkitTransitionEnd"); main.$firework2.css({"-webkit-transition":"all 1200ms ease-in","opacity":"0","top":"40%","-webkit-transform":"scale(1.5)"}).on("webkitTransitionEnd",function(e){ main.$firework2.off("webkitTransitionEnd"); main.animateFunc(); }); }); }); }); }, 2700); //雲を初期化 for(var i = 1;i <= 8;i++){ var $o = $("#cloud"+i); var left = parseInt($o.css("left")); left += (left < 130)? 100:-100; var top = parseInt($o.css("top")) + 20; main.cloud.push({x:left,y:top,$obj:$o}); } main.$btnStart.on("click",main.animateFunc); main.$btnReset.on("click",main.resetFunc); }, crTrmLine:function(h,x,y){ // var div_ele = document.createElement('div'); $(div_ele).css({ "width":"150px", "height":h+"px", "position":"absolute", "left":x+"px", "top":y+"px", "border":"solid 10px #FFF", "opacity":"0.5", "border-left":"none"}); main.$tournament.append($(div_ele)); }, crTrmRedLine:function(h,x,y,dly){ // var div_ele = document.createElement('div'); $(div_ele).css({ "width":"0px", "height":h+"px", "position":"absolute", "left":x+"px", "top":y+"px", "border":"solid 10px #F00", "opacity":"0.7", "border-left":"none", "border-right":"none"}); main.$tournament.append($(div_ele)); $(div_ele).delay(dly).animate({"width":"150px"},400); }, crTrmRedLine2:function(h,x,y,p,dly){ // var div_ele = document.createElement('div'); $(div_ele).css({ "width":"150px", "height":"0px", "position":"absolute", "left":x+"px", "top":(y+p)+"px", "border-right":"solid 10px #F00", "opacity":"0.7"}); main.$tournament.append($(div_ele)); if(p > 0){ $(div_ele).delay(dly).animate({"height":h+"px","top":(y+h-10)+"px"},200); }else{ $(div_ele).delay(dly).animate({"height":h+"px"},200); } }, animate1:function(){ //アニメーション１ for(var i = 0;i < 8;i++){ var ran = Math.random() * i/4; main.cloud[i].$obj.css({"-webkit-transition":"all "+(1500 + ran)+"ms ease-out","-webkit-transition-delay":ran+"s"}); main.cloud[i].$obj.css({"opacity":"1","left": main.cloud[i].x+"px","top":main.cloud[i].y+"px"}); } //スタジアムを初期化 main.$bg1.css({"opacity":"1","bottom":"0px"}).on("webkitTransitionEnd",function(e){ main.$bg1.css({"-webkit-transition":"all 0ms ease-out"}); }); main.$tournament.css({"-webkit-transform":"rotateX(0deg) rotateY(0deg) rotateZ(-90deg)","opacity":"1"}); }, animate2:function(){ //アニメーション１ for(var i=0;i < 21;i++){ var newObj=main.$home_logo[0].cloneNode(true); main.$cube2.append($(newObj)); $(newObj).css({ "left":(i%3*50)+"%", "top":(i/3*15)+"%", "opacity":"1", "-webkit-animation-name":"home1", "-webkit-animation-delay":(i/15)+"s", "-webkit-animation-duration":"2s", "-webkit-animation-iteration-count":"1"}); $(newObj).on("webkitAnimationEnd",main.animate_h1); } }, ah:0, animate_h1:function(){ //ホームアニメーション１ $(this).off("webkitAnimationEnd",main.animate_h); $(this).on("webkitAnimationEnd",main.animate_h2); $(this).css({"left":"50%","top":"50%", "-webkit-animation-name":"home2", "-webkit-animation-delay":"0s", "-webkit-animation-duration":"1s", "-webkit-animation-iteration-count":"1"}); }, animate_h2:function(){ //ホームアニメーション２ $(this).on("webkitAnimationEnd",main.animate_h3); $(this).css({"left":"50%","top":"50%","opacity":"0", "-webkit-animation-name":"home3", "-webkit-animation-delay":"0s", "-webkit-animation-duration":"1s", "-webkit-animation-iteration-count":"1"}); }, animate_h3:function(){ //ホームアニメーション３ main.ah++; $(this).remove(); main.$home_logo.css({ "left":"50%", "top":"50%", "opacity":"1", "-webkit-transform":"rotateZ(-20deg) scale(2,2)"}); if(main.ah >= 21){ main.ah = 0; main.$cube2.append(main.$over); main.$over.on("webkitAnimationEnd",main.animate_h4); main.$over.css({ "-webkit-animation-name":"over", "-webkit-animation-delay":"0s", "-webkit-animation-duration":"0.5s", "-webkit-animation-iteration-count":"1"}); } }, animate_h4:function(){ //ホームアニメーション４ main.$over.off("webkitAnimationEnd",main.animate_h4); main.animateFunc(); main.animate_a1(); }, animate_a1:function(){ //アウェイアニメーション１ main.setTr(0,0,'translate( -500px, -500px )',main.$away_logo); main.$away_logo.on("click",main.animate_a2); setTimeout(main.animate_a2,500); }, animate_a2:function(){ //アウェイアニメーション１ main.$away_logo.off("webkitTransitionEnd",main.animate_a2); main.ah++; main.$away_logo.on("webkitTransitionEnd",main.animate_a2); if(main.ah == 1){ main.setTr(400,0,'translate( 320px, 300px ) rotateZ(40deg)',main.$away_logo); }else if(main.ah == 2){ main.setTr(50,0,'translate( 260px, 420px ) rotateZ(-40deg)',main.$away_logo); }else if(main.ah == 3){ main.setTr(300,0,'translate( -320px, -200px ) rotateZ(40deg)',main.$away_logo); }else if(main.ah == 4){ main.setTr(300,0,'translate( 200px, -420px ) rotateZ(-30deg)',main.$away_logo); }else if(main.ah == 5){ main.setTr(200,0,'translate( 320px, -100px ) rotateZ(60deg)',main.$away_logo); }else if(main.ah == 6){ main.$away_logo.on("webkitAnimationEnd",main.animate_a3); main.setTr(0,0,'translate( 0px, 0px ) rotateZ(-740deg) scale(2,2)',main.$away_logo); main.setAn('away1',0,300,main.$away_logo); } }, animate_a3:function(){ //アウェイアニメーション３ main.$cube3.append(main.$over); main.$over.on("webkitAnimationEnd",main.animate_a4); main.setAn('over',0,500,main.$over); }, animate_a4:function(){ //アウェイアニメーション３ main.$over.off("webkitAnimationEnd",main.animate_a4); main.$away_logo.animate({"top":"75%"},300,main.animate_f1); main.$cube.animate({"top":"50%","height":"480px"},300); }, animate_f1:function(){ var newObj1=main.$home_logo[0].cloneNode(true); $(newObj1).css({"top":"25%","-webkit-animation-duration":"0ms"}); var newObj2=main.$away_logo[0].cloneNode(true); $(newObj2).css({"top":"25%","-webkit-animation-duration":"0ms"}); main.$cube_h.css({"opacity":"1"}); main.$cube_a.css({"opacity":"1"}); main.$cube_h1.append($(newObj1)); main.$cube_a1.append($(newObj2)); main.$cube.css({"display":"none"}); main.setTr(0,0,'rotateY(180deg)',main.$cube_h); main.setAn('rotate_h',0,1300,main.$cube_h); main.setAn('rotate_a',0,1300,main.$cube_a); main.$cube_a.on("webkitAnimationEnd",main.animate_f2); main.$cube_h3.delay(280).animate({"opacity":"0"},200); }, animate_f2:function(){ main.$line.css({"width":"640px"}); main.$fight.css({"-webkit-transform":"scale(1,1) skewX(0deg)"}); }, setTr:function( duration, delay, transform, selector ){ //トランジションセット return selector.css({ '-webkit-transition-duration' : duration + 'ms', '-webkit-transition-delay' : delay + 'ms', '-webkit-transform' : transform, '-webkit-transition-timing-function':'linear' }); }, setAn:function( anime, delay, duration, selector ){ //アニメーションセット return selector.css({ "-webkit-animation-name":anime, "-webkit-animation-delay":delay+"ms", "-webkit-animation-duration":duration + "ms", "-webkit-animation-iteration-count":"1" }); }, animateFunc:function(e){ //アニメーション main.anime++; if(main.anime == 1){ main.animate2(); main.$cube2.css({"display":"block"}); main.$cube.css({"-webkit-transform":"rotateY(90deg)"}); }else if(main.anime == 2){ main.$cube1.css({"display":"none"}); main.$cube3.css({"display":"block"}); main.$cube.css({"-webkit-transform":"rotateY(0deg)"}); }else if(main.anime == 3){ main.$cube3.css({"height":"480px","top":"480px"}); main.$cube2.css({"height":"480px"}); main.$cube2.css({"-webkit-transform":"rotateY(180deg)"}); main.$cube3.css({"-webkit-transform":"rotateY(180deg)"}); }else if(main.anime == 4){ main.$cube2.css({"-webkit-transform":"rotateY(0deg)"}); main.$cube3.css({"-webkit-transform":"rotateY(0deg)"}); } if(main.anime < 3){ //setTimeout(main.animateFunc,1000); }else if(main.anime < 4){ //setTimeout(main.animateFunc,500); } }, resetFunc:function(e){ //リセット main.anime = 0; main.$cube1.css({"display":"block"}); main.$cube2.css({"display":"block"}); main.$cube3.css({"display":"none"}); main.$cube.css({"-webkit-transform":"rotateY(180deg)"}); } }; //画像 var img = { imgloaded : 0, imgLoading:function(){ //初期画像読み込み for(var i = 1;i <= 8;i++){ img.imgLoad(main.cloud[i-1].$obj,'http://nyarineko.jp/spec/img/cloud'+i+'.png'); } img.imgLoad(main.$bg1,'http://nyarineko.jp/spec/img/bg1.png'); img.imgLoad(main.$bg2,'http://nyarineko.jp/spec/img/bg2.png'); img.imgLoad(main.$home_logo,'http://nyarineko.jp/spec/img/logo1.png'); img.imgLoad(main.$away_logo,'http://nyarineko.jp/spec/img/logo2.png'); img.imgLoad(main.$daihyou,'http://nyarineko.jp/spec/img/title1.png'); img.imgLoad(main.$shiai,'http://nyarineko.jp/spec/img/title2.png'); img.imgLoad(main.$firework1,'http://nyarineko.jp/spec/img/fireworks.png'); img.imgLoad(main.$firework2,'http://nyarineko.jp/spec/img/fireworks.png'); }, imgLoad:function($obj,src){ //画像ローダー var image = new Image(); $obj.append($(image)); $(image).load(function(){ img.imgloaded++; if(img.imgloaded == 16) main.animate1(); }).error(function () { console.log("loading error!!"); }).attr('src', src); } } $(function(){ console.log("完了"); main.loaded(); }); })();

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer

koh5_pano

Navigation