제이쿼리 - 애니메이션 배너 만들기

수정한 데모보기

링크

이곳 을 클릭하면 이미 만들어 놓은 제이쿼리 배너를 수정하여 사용할 수 있도록 공개해 놓았고 DEMO를 클릭하면 어떤 내용인지 알 수가 있습니다. 다운로드를 클릭하면 다음의 압축파일을 다운 받을 수 있습니다. 이 배너에는 이미지 회전, 슬라이드인 아웃, 줌인 아웃 등 여러가지 애니메이션이 되므로 원하는대로 응용할 수 있습니다.

CustomAnimationBanner.zip

<div id="ca_banner1" class="ca_banner ca_banner1">

<div class="ca_slide ca_bg1">

<div class="ca_zone ca_zone1"><!--Product-->

<div class="ca_wrap ca_wrap1">

<img src="images/product1.png" class="ca_shown" alt=""/>

<img src="images/product1.png" alt="" style="display:none;"/>

<img src="images/product1.png" alt="" style="display:none;"/>

<img src="images/product1.png" alt="" style="display:none;"/>

<img src="images/product1.png" alt="" style="display:none;"/>

</div>

</div>

<div class="ca_zone ca_zone2"><!--Line-->

<div class="ca_wrap ca_wrap2">

<img src="images/line1.png" class="ca_shown" alt=""/>

<img src="images/line1.png" alt="" style="display:none;"/>

</div>

</div>

<div class="ca_zone ca_zone3"><!--Title-->

<div class="ca_wrap ca_wrap3">

<img src="images/title1.png" class="ca_shown" alt="" />

<img src="images/title2.png" alt="" style="display:none;"/>

<img src="images/title3.png" alt="" style="display:none;"/>

</div>

</div>

</div>

</div>

 

function부분의 내용입니다. 주석을 달아놓았으니 참고하세요.

$('#ca_banner1').banner({

steps : [

[

//1 step:

[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],

//1번째 div, 2번 이미지 줌아웃회전, 3번 이미지 줌인회전

[{"to" : "1"}, {}],

//2번째 div, 1번 이미지 정지

[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]

//3번째 div, 1번 이미지 오른쪽으로 슬라이드아웃, 2번 이미지 오른쪽으로부터 슬라이드인

],

[

//2 step:

[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],

//1번째 div, 3번 이미지 상방향으로 슬라이드아웃, 4번 이미지 하방향으로 슬라이드인

[{"to" : "1"}, {}],

//2번째 div, 1번 이미지 정지

[{"to" : "2"}, {}]

//3번째 div, 2번 이미지 정지

],

[

//3 step:

[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],

//1번째 div, 4번 이미지 줌아웃, 5번 이미지 줌인

[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],

//2번째 div, 1번 이미지 오른쪽으로 슬라이드아웃, 2번 이미지 오른쪽에서 슬라이드인

[{"to" : "2"}, {}]

//3번째 div, 2번 이미지 정지

],

[

//4 step

[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],

//1번째 div, 5번 이미지 하방향 슬라이드아웃, 1번 이미지 위로부터 슬라이드인

[{"to" : "2"}, {}],

//2번째 div, 2번 이미지 정지

[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]

//3번째 div, 2번 이미지 줌아웃, 3번 이미지 줌인

],

[

//5 step

[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],

//1번째 div, 1번 이미지 왼쪽으로 슬라이드아웃, 2번 이미지 왼쪽으로부터 슬라이드인

[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],

//2번째 div, 2번 이미지 줌아웃, 1번 이미지 줌인

[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]

//3번째 div, 3번 이미지 오른쪽으로 슬라이드아웃, 1번 이미지 오른쪽으로부터 슬라이드인

]

],

total_steps : 5,

speed : 3000

});

 
위에서 5단계의 애니메이션이 되는데 두개의 단계만 필요한경우 나머지는 삭제하고 total_steps에서 2로 고치면 되고 to다음에 오는 숫자는 이미지의 순서 숫자이니 변경을 해줘야합니다. 예를들어 1과 2스텝만 사용한다면 두번째 첫 to다음에는 1이 되어야 1스텝으로 넘어갑니다. speed는 하나의 애니메이션이 실행되는 시간으로 3000밀리초입니다. effect부분도 원하는 순서로 바꿀 수 있습니다. 

문제는 CSS인데요. 자신의 환경에 맞게 CSS의 수치를 조정해줘야합니다. 제가 수정한 CSS를 참고하세요.

수정본

CustomAnimationBanner수정.zip

 

수정한 데모보기

링크