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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그


수정한 데모보기

링크


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


수정한 데모보기


링크