베가 로고 애니메이션

http://www.ivega.co.kr/main.do

by hohoya33

HTML

<div class="gnb_logo_w">
	<h1><a href="/main.do"><img src="http://www.ivega.co.kr/img/layout/logo_g_i1.png" alt="VEGA"></a></h1>
	<div class="glogo_box">                     
		<div class="gb_in1">
			<div class="cont_bg"></div>
		</div>
		<div class="gb_in2">                            
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="gb_in3">
			<div class="cont_bg1"></div>                            
		</div>
	</div>
</div>

CSS

*{margin:0;padding:0;}
.gnb_logo_w {width:458px; height:130px; position:absolute; left:0; top:0; z-index:100; overflow:hidden;}
.gnb_logo_w .glogo_box {width:312px; height:130px; position:absolute; top:0;  left:146px; z-index:120;  }
.gnb_logo_w .glogo_box .gb_in1 { width:312px; height:130px; position:absolute; top:0;  left:0; overflow:hidden;}
.gnb_logo_w .glogo_box .gb_in1 .cont_bg {background:url(http://www.ivega.co.kr/img/layout/logo_g_bg.png) no-repeat 0 0; width:312px; height:130px; position:absolute; top:0; left:-310px; }
.gnb_logo_w .glogo_box .gb_in2 {width:322px; height:128px; position:absolute; z-index:151; top:0; left:-12px; overflow:hidden;}
.gnb_logo_w .glogo_box .gb_in2 div {height:128px; position:absolute; left:0; top:0; background:url(http://www.ivega.co.kr/img/layout/logo_g_i3.jpg) no-repeat; -ms-filter: alpha(opacity=0); filter: alpha(opacity=0); opacity:0; -moz-opacity:0;}

.gnb_logo_w .glogo_box .gb_in3 {width:322px; height:128px; position:absolute; z-index:151; top:0; left:-12px; z-index:170; }
.gnb_logo_w .glogo_box .gb_in3 .cont_bg1 {width:149px; height:128px; position:absolute; right:0; top:0; z-index:171; background:url(http://www.ivega.co.kr/img/layout/logo_g_i4.jpg) no-repeat 0 0;  display:none;}
.gnb_logo_w .glogo_box .gb_in3 .cont_bg2 {width:123px; height:108px; position:absolute; left:103px;top:0; z-index:172; background:url(http://www.ivega.co.kr/img/layout/logo_g_i8.jpg) no-repeat 0 0; display:none;}
.gnb_logo_w .glogo_box .gb_in3 .cont_bg3 {width:241px; height:128px; position:absolute; z-index:173; display:none;}
.gnb_logo_w .glogo_box .gb_in3 .cont_bg3 img {width:100%; height:100%;}

JavaScript

jQuery(function() {

  
    
    /* 2013-02-15 캐치프라이즈  추가  시작*/
    for (var i = 0; i < 6; i++) {
        jQuery('.glogo_box .gb_in2').append('<div></div>');
    }

    var tile1 = jQuery('.glogo_box .gb_in2').find('div:eq(0)');
    var tile2 = jQuery('.glogo_box .gb_in2').find('div:eq(1)');
    var tile3 = jQuery('.glogo_box .gb_in2').find('div:eq(2)');
    var tile4 = jQuery('.glogo_box .gb_in2').find('div:eq(3)');
    var tile5 = jQuery('.glogo_box .gb_in2').find('div:eq(4)');
    var tile6 = jQuery('.glogo_box .gb_in2').find('div:eq(5)');
    tile1.css({ "background-position": "0 0", width: '39px', left: '-39px' });
    tile2.css({ "background-position": "-39px 0", width: '91px', left: '-130px' });
    tile3.css({ "background-position": "-130px 0", width: '43px', left: '-173px' });
    tile4.css({ "background-position": "-173px 0", width: '21px', left: '-194px' });
    tile5.css({ "background-position": "-194px 0", width: '37px', left: '-231px' });
    tile6.css({ "background-position": "-231px 0", width: '91px', left: '-322px' });
    

    function logoSet()
    {
        tile1.animate({ left: '-39px', opacity: 0 }, 500);
        tile2.animate({ left: '-130px', opacity: 0 }, 600);
        tile3.animate({ left: '-173px', opacity: 0 }, 700);
        tile4.animate({ left: '-194px', opacity: 0 }, 800);
        tile5.animate({ left: '-231px', opacity: 0 }, 900);
        tile6.animate({ left: '-322px', opacity: 0 }, 1000);
        jQuery('.glogo_box .gb_in1 .cont_bg').animate({ left: '-310px' }, 500);
        jQuery('.gnb_logo_w').animate({width:'146px'},500);        
    }

    function logoInit()
    {
        jQuery('.gnb_logo_w').animate({width:'458px'},0);    
        jQuery('.glogo_box .gb_in1 .cont_bg').animate({ left: '0px' }, 500);
        tile1.animate({ left: '0', opacity: 0.9 }, 1300, function ()
        {
            jQuery(this).animate({ opacity: 1 }, 250);
        });
        tile2.animate({ left: '39px', opacity: 0.8 }, 1200, function ()
       ...