BookBlock: A Content Flip Plugin | Codrops

A jQuery plugin that will create a booklet-like component that let’s you navigate through its items by flipping the pages.

VIEW DEMO DOWNLOAD SOURCE

BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.

We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).

The following structure will allow to add custom content in a wrapper with the class “cf-item”, which represents an open page (left and right side):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- custom content -->
    </div>
    <div class="bb-item">
         
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

The plugin can be called like this:

1
2
3
4
5
$(function() {
             
    $( '#bb-bookblock' ).bookblock();
 
});

You also have to include the other scripts that are needed (see one of the demo files).

OPTIONS

The following options are available:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// speed for the flip transition in ms.
speed       : 1000,
 
// easing for the flip transition.
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
shadowSides : 0.2,
 
// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip  : 0.1,
 
// perspective value
perspective : 1300,
 
// if we should show the first item after reaching the end.
circular    : false,
 
// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl      : '',
 
// if we want to specify a selector that triggers the prev() function.
prevEl      : '',
 
// 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).
onEndFlip   : function( page, isLimit ) { return false; },
 
// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

Check out the three demos with different configurations:

Find this project on Github

VIEW DEMO DOWNLOAD SOURCE