[jQuery Plugin] [UI] BookBlock - 책 넘기는 효과 플러그인

공식 사이트 링크 : http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/

책 넘기는 효과를 부드럽게 표시해주는 Animation jQuery 플러그인

[설치 방법]

1. 소스를 다운받아, 자신의 웹디렉토리에 복사

예) Context/plugins/

[사용 방법]

 - 플러그인 소스를 import

 - document.ready 시에 BookBlock을 불러들이는 소스를 로드

$('#bb-bookblock').bookblock();

[테스트 소스]

- html소스

{첨부파일로 대체}

 - javascript 소스

$(function() {
    Test.init();
    $('#bb-bookblock a').click(function() {
        Test.nextFlip();
    });
});

var Test = {
    /**
     * initialize
     */
    init : function() {
        $bookBlock = $('#bb-bookblock');

        $bookBlock.bookblock({
            // vertical or horizontal flip
            // 수평 또는 수직 flip
            orientation : 'vertical',
             
            // ltr (left to right) or rtl (right to left)
            // 기본방향 좌우 또는 우좌 설정
            direction : 'ltr',
             
            // speed for the flip transition in ms.
            // flip 전환 속도 설정
            speed       : 1000,
             
            // easing for the flip transition.
            // flip 시, easing 옵션(CSS3 옵션) (ease-in, ease-out, ease-in-out)
            easing      : 'ease-in-out',
             
            // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
            // 플립시 가상 그림자 설정
            shadows     : true,
             
            // opacity value for the "shadow" on both sides (when the flipping page is over it).
            // value : 0.1 - 1
            // 사이드 shadow 옵션
            shadowSides : 0.2,
             
            // opacity value for the "shadow" on the flipping page (while it is flipping).
            // value : 0.1 - 1
            // shadow 플립 옵션
            shadowFlip  : 0.1,
             
            // if we should show the first item after reaching the end.
            // 마지막 페이지일 경우, 첫 페이지로 이동여부 설정
            circular    : true,
             
            // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
            // jQuery의 next() 함수에 대한 selector 설정
            nextEl      : '',
             
            // if we want to specify a selector that triggers the prev() function.
            // jQuery의 prev() 함수에 대한 selector 설정
            prevEl      : '',
             
            // If true it overwrites the circular option to true!
            // 자동 롤링 설정
            autoplay        : false,
                     
            // time (ms) between page switch, if autoplay is true. 
            // autoplay가 true일 경우 페이지 전환 속도
            interval        : 3000,
             
            // callback after the flip transition.
            // page is the current item's index.
            // isLimit is true if the current page is the last one (or the first one).
            // flip 이후 callback 함수
            onEndFlip   : function( page, isLimit ) { return false; },
             
            // callback before the flip transition.
            // page is the current item's index.
            // flip 이전 callback 함수
            onBeforeFlip: function( page ) { return false; }
        });
    },
    /**
     * 다음 플립으로 이동
     */
    nextFlip : function() {
        $bookBlock.bookblock('next');
    }
};