$(function() { var tempShake, tempCir, tempCub, tempArr, tempPop, tempY, aniBool1 = true, aniBool2 = true, aniBool3 = true, clientHeight = $(window).height(), documentHeight = $(document).height(), topHeight = $(".hd").height(), contentHeight = clientHeight - topHeight, imgHeight = 600, firstStop = contentHeight + imgHeight, secondStop = firstStop + contentHeight + imgHeight, sTop; $(".bd").css({height:clientHeight-topHeight}); function show_0(){ $("#cir7").stop(true,true).animate({left:"836px",top:"266px",opacity:"1"},600); $("#cir6").stop(true,true).animate({left:"602px",top:"0",opacity:"1"},1000); $("#cir5").stop(true,true).animate({left:"688px",top:"316px",opacity:"1"},400); $("#cir4").stop(true,true).animate({left:"340px",top:"62px",opacity:"1"},800); $("#cir3").stop(true,true).animate({left:"742",top:"90px",opacity:"1"},1200); $("#cir2").stop(true,true).animate({left:"306px",top:"245px",opacity:"1"},800); tempCir = setTimeout(function(){ $("#cir1").stop(true,true).animate({left:"400px",top:"72px",opacity:"1"},1000); },1000); tempShake = setTimeout(function(){ $("#circlebox").addClass("shake"); },2200); } function hide_0(){ $("#cir1").stop(true,true).animate({opacity:"0"}); $("#cir2").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); $("#cir3").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); $("#cir4").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); $("#cir5").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); $("#cir6").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); $("#cir7").stop(true,true).animate({left:"580px",top:"270px",opacity:"0"}); clearTimeout(tempCir); clearTimeout(tempShake); $("#circlebox").removeClass("shake"); } function show_1(){ $("#cub1").stop(true,true).animate({top:"0",opacity:"1"},800); $("#cub2").stop(true,true).animate({top:"-69px",opacity:"1"},1400); $("#cub3").stop(true,true).animate({top:"0",opacity:"1"},1000); $("#cub4").stop(true,true).animate({top:"96px",opacity:"1"},800); $("#cub5").stop(true,true).animate({top:"203px",opacity:"1"},1400,function(){ $("#cubebox").addClass("rotimg"); }); tempCub = setTimeout(function(){ $("#cubeLeft").stop(true,true).animate({left:"640px"},500); $("#cubeRight").stop(true,true).animate({left:"240px"},500); },2000); } function hide_1(){ $("#cub1").stop(true,true).css({top:"-500px",opacity:"0"}); $("#cub2").stop(true,true).css({top:"500px",opacity:"0"}); $("#cub3").stop(true,true).css({top:"500px",opacity:"0"}); $("#cub4").stop(true,true).css({top:"500px",opacity:"0"}); $("#cub5").stop(true,true).css({top:"-500px",opacity:"0"}); $("#cubeLeft").stop(true,true).css({left:"240px"}); $("#cubeRight").stop(true,true).css({left:"640px"}); clearTimeout(tempCub); $("#cubebox").removeClass("rotimg"); } function show_2(){ $("#popbox").stop(true,true).show(); $("#arrowbox").css({height:"370px"}); $("#arr1").stop(true,true).animate({top:"72px",opacity:"1"},1000); $("#arr2").stop(true,true).animate({top:"110px",opacity:"1"},600); $("#arr3").stop(true,true).animate({top:"0",opacity:"1"},800); $("#arr4").stop(true,true).animate({top:"90px",opacity:"1"},600); tempArr = setTimeout(function(){ $("#arrowbox").stop(true,true).animate({top:"-1200px"},1000,function(){ $("#arrowbox").stop(true,true).css({height:"0"}); }); },1200); tempPop = setTimeout(function(){ $("#pop1-grey").stop(true,true).animate({top:"24px",opacity:"1"},1000,function(){ $("#popcolorbox").stop(true,true).animate({height:"350"},1200); }); $("#pop2-grey").stop(true,true).animate({top:"0",opacity:"1"},600); $("#pop3-grey").stop(true,true).animate({top:"32px",opacity:"1"},800); $("#pop4-grey").stop(true,true).animate({top:"76px",opacity:"1"},600); $("#pop5-grey").stop(true,true).animate({top:"22px",opacity:"1"},600); },1600); } function hide_2(){ $("#arr1").stop(true,true).animate({top:"500px",opacity:"1"}); $("#arr2").stop(true,true).animate({top:"500px",opacity:"0"}); $("#arr3").stop(true,true).animate({top:"500px",opacity:"0"}); $("#arr4").stop(true,true).animate({top:"500px",opacity:"0"}); $("#arrowbox").stop(true,true).css({top:"-22px",height:"0"}); clearTimeout(tempArr); clearTimeout(tempPop); $("#pop1-grey").stop(true,true).css({top:"-500px",opacity:"0"}); $("#pop2-grey").stop(true,true).css({top:"-500px",opacity:"0"}); $("#pop3-grey").stop(true,true).css({top:"-500px",opacity:"0"}); $("#pop4-grey").stop(true,true).css({top:"-500px",opacity:"0"}); $("#pop5-grey").stop(true,true).css({top:"-500px",opacity:"0"}); $("#popbox").stop(true,true).hide(); $("#popcolorbox").stop(true,true).css({height:"0"}); } $(window).scroll(function(){ sTop = $(window).scrollTop(); if( 0 <= sTop && sTop < firstStop ){ tempY = (1200 / documentHeight) * (sTop - clientHeight); $("#bdimg1").css({"background-position":"center " + tempY + "px"}); if ( sTop == 0 ) { aniBool1 = false; aniBool2 = true; hide_0(); show_0(); } }; if( firstStop < sTop && sTop < secondStop ){ tempY = (1200 / documentHeight) * (sTop - firstStop - clientHeight); $("#bdimg2").css({"background-position":"center " + tempY + "px"}); if ( aniBool2== true ) { aniBool2 = false; aniBool1 = true; aniBool3 = true; hide_1(); show_1(); } }; if( secondStop < sTop ){ if ( aniBool3== true ) { aniBool3 = false; hide_2(); show_2(); } } }); });