in Playground

BookBlock: A Content Flip Plugin

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

BookBlock: A Content Flip Plugin

View demo Download source

BookBlock is a 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 “bb-item”, which represents an open page (left and right side): 

<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:

$(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:

// vertical or horizontal flip
orientation : 'vertical',

// ltr (left to right) or rtl (right to left)
direction : 'ltr',

// 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,

// 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		: '',

// If true it overwrites the circular option to true!
autoplay        : false,
		
// time (ms) between page switch, if autoplay is 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).
onEndFlip	: function( page, isLimit ) { return false; },

// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

The following public methods are available to use in combination with navigation elements:

  • $( ‘#bb-bookblock’ ).bookblock( ‘next’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘prev’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )
  • $( ‘#bb-bookblock’ ).bookblock( ‘first’ )
  • $( ‘#bb-bookblock’ ).bookblock( ‘last’ )

Check out the demos with different configurations:

Find this project on Github

The illustrations and photos used in the demos are by Kevin Howdeshell, majownik and Isaac Montemayor.

View demo Download source

Previous:
Next:

Tagged with:

View all contributions by

Website: http://tympanus.net

Related Articles

PageFlipLayout_featured

Page Flip Layout

MeshLines_Featured

Animated Mesh Lines

landscape_featured

Interactive Animated Landscape

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 129

Comments are closed.
  1. 1

    Also, can I modify the plugin so it opens on both sides (so page flip effect on right and left side). Just think about it as a folder
    with 2 flaps, one on each side.

    Thanks in advance

  2. 2

    Is it possible to use the pluggin such that, the pages flip vertically as opposed to horizontally ?

  3. 3

    Hi,

    Dear Bro…it is awesome….i am searching for the page flip at last i got it the code ,thanks a lots dear….bro….

    Can you help me my requirement is the page flip with text search in page ,…please say me how to do it or if you have some sample can you upload it ….so that it would help me a lot….thanks in advance

  6. 6

    hello! nice plugin!
    i have problems building a navigation. every link should open its div. i tried this but its not working:
    $('#page3').click(function(){
    config.bb.jump(3);
    });
    any sugestions how to build a normal navigation? thanks!

  8. 12

    is it possible to deactivate the flip animation in IE9 because it dosnt look good in this browser?

  10. 16

    Hi there! It’s an excelente plugin, is there any chance that this could use “-webkit-transform” for the 3D transformation so its compatible with Chrome ? Thanks !

    • 17

      The demos are compatible with Chrome. You don’t see the 3D effect?

  12. 19

    Looks good but doesn’t show the flip in IE 9 or IE 10. Is there any way to fix that?

    Thank you!

  14. 21

    Is it possible to not have the page attempt to flip when someone is on the first page or the last page?

  15. 22

    with the new version my old code is not working anymore. i am trying to build an own navigation:

    var config = {
    $bookBlock : $( '#bb-bookblock' ),
    $navNext : $( '#bb-nav-next' ),
    $navPrev : $( '#bb-nav-prev' ),
    $navFirst : $( '#bb-nav-first' ),
    $navLast : $( '#bb-nav-last' ),
    $navJump : $( '#bb-nav-jump' ),
    bb : $( '#bb-bookblock' ).bookblock( {
    speed : 800,
    shadowSides : 0.8,
    shadowFlip : 0.7

    } )

    }

    ....

    $('.page3').click(function(){
    config.bb.jump(3);
    });

    the console tell me this:
    Uncaught TypeError: Object [object Object] has no method ‘jump’

  16. 25

    How i can deactivate the option when we drag the mouse and that change the page?

    Thanks for this awesome work!

  17. 26

    If I wanted to use this as a catalog, what format can I use to make links to bookmark sections?

  20. 29

    I am trying to add trivia questions to each page. When the user clicks and answer the page will turn and they will see the results on the one side and see a new question on the other side of the page. I added <a href=”#” rel=”nofollow”> to all the answer options so the page turns when the user clicks the answer but it only works with the first answer option. I don’t have much experience with jQuery and looking for some help.

    Thank you

    • 30

      I added the link with the id of bb-nav-next and class of bb-custom-icon bb-custom-icon-arrow-right

Comments are closed.