워드프레스 쇼핑몰, 웹사이트

블로그


수정한 데모보기

링크


이곳 을 클릭하면 이미 만들어 놓은 제이쿼리 배너를 수정하여 사용할 수 있도록 공개해 놓았고 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를 참고하세요.


수정한 데모보기


링크

loyalty , ,

댓글 (2)

댓글 목록

Here is our team

Thumbnail Image

Gigi Hadid
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Christian Louboutin
Designer

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.

Thumbnail Image

Kendall Jenner
Model

You can write here details about one of your team members. You can give more details about what they do. Feel free to add some links for people to be able to follow them outside the site.