작성일자
카테고리 Javascript/JQuery


수정한 데모보기

링크


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

<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를 참고하세요.


수정한 데모보기


링크

저작자 표시 비영리 변경 금지
신고

티스토리 툴바