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.

By Manoela Ilic in Playground on
BookBlock: A Content Flip Plugin
Demo Download

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).

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js

Trigonometry in CSS and JavaScript: Beyond Triangles

On-Scroll Shape Morph Animations

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 129

Comments are closed.

  2. Hi Pedro,

    Thanks so much for your awesome plugin.

    I’m having some difficulty with the implementation though, I can setup the plugin no problem. But in the context of a responsive site, I’d like to call the fire the method on resize. I understand it’s recording the dimension and positioning the elements when the page first loads. Do you have any recommendations on how to perhaps call the plugin again on resize?

    I’d love to be able to figure this one out, so please do let me know!

    Thanks again for all your work, I owe ya a six pack.

    • Thanks for your feedback. I’ve updated the script (zip and github ) to be able to recalculate the element’s width on window resize. Let me know if that works fine for you, or if there’s something still missing.. Thanks! Pedro

  5. Hey Pedro, Great effect. Is there any way to do this so the pages flip vertically instead of side-to-side?
    Check out my page & art, and you’d understand what I’d love to do…
    http://www.mechanicalflipbook.com

    Could I solicit your help in doing a up-down flipbook style slider like this?
    Many thanks,
    Mark

  6. Hello.

    Fantastic Plugin! How would I implement a pause button in the navigation? Any help would be greatly appreciated.

  10. Hello

    This plugin is great, but so far it doesn’t work on IE 9 and Chrome.

    Is there any quick fix to this?

    Thanks

  11. 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

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

  13. 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

  16. 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!

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

  20. 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 !

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

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

    Thank you!

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

  25. 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’

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

    Thanks for this awesome work!

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

  30. 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

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

  32. Hey mate, really great tuto… E como vi você falando português…

    Estou com um problema que não achei solução ainda, gostaria de inserir uma barra de scroll para as paginas com maior texto, porem não estou conseguindo fazer funcionar, tentei usar o jquery.scrollpane mas não consegui… e como estou engatinhando nessa parte de integrar CSS e Jquery apreciaria muito a ajuda…

    I have a problem I did not find solution yet, I would like to insert a scroll bar for pages with more text, however I am not able to make it work, tried using jquery.scrollpane but could not … I’m a little green on CSS and Jquery, sooooooo any help will be great 🙂

  34. This is a sweet plugin – great job. I’m trying to get it to be responsive but running into some bugs. First of all, is it possible to do this with how the plugin is setup? Here’s what I have so far: davelassanske.com/bookblock/

    Thanks!

  35. First, I would like to say the plugin is great!!!

    I have a problem using it:
    It’s weird. I’m using the plugin with image generated with PHP and there is a flickering before the animation.
    I’ve found it’s because of the “_layout” function which call this line:
    this.$items.hide();

    if I’m using a real image (e.g. http://www.mysites.com/images/1.jpg) => it works fine… the line this.@items.hide() won’t really hide the “bb-item” item…
    But if I’m using a PHP script to generate the image (e.g. http://www.mysites.com/images/1.php) => it starts to flicker before the animation…

    Do you have any idea?

    Many thanks!
    Puffnir.

  36. Bom dia,

    Gostaria de saber se há algum ajuste para que o flip funcione no IE, e/ou alguma previsão para sair uma correção para que funcione.

    Obrigado.

  37. It would be really, really helpful if you could show an example of dots navigation being used with arrow navigation. I’m not very good with jquery and your script structure for the dots examples if very different to the rest of the examples – so I have been unable to integrate despite numerous attempts! Thank you for the brill plug-in anyway!

  40. It’s good but useless if recharged every image in safari and IE is not
    would be good to indicate this at first to keep working while investigating a solution

    regards

  41. This plugin is great and has been a huge help in a project I’m working on – one question, I would like to be able to have a horizontal flip that goes from top to bottom instead of bottom to top. The default doesn’t have that option so I tried playing around with the transition effects in the CSS but I couldn’t get it to look right. I know there must be some combination of changes to the rotation and position that make it go the way I want, but so far my changes cause the images to jump out of place, or the top and bottom switch places, or other weird effects.

    What would I need to change in order to reverse the direction of the horizontal flip?

    Thanks so much!

    • I found an answer to my own question – in jquery.bookblock.js, I changed the startSlideshow function. Changing the line that says “self._navigate( ‘next’ );” to “self._navigate( ‘prev’ );” gave me the behavior I was looking for, and now my slideshow items flip from the top to bottom instead of the other way around.

      This might be a good place for a config option, but I hope this trick helps anyone else who has this question.

      Thanks again for the awesome plugin!

  42. thank you so much for this great tutorial. i have red the comments but i’m not shure wether ie10 is fully supported or not :/ although ie10 claims to be cool with css 3d transitions it seems not to animate the pages? is there any way to make this work? unfortunately my windows pc refuses to update the ie browser, so this was just what i heard from a friend. thank you for a quick answer!

    kind regards from germany

  44. This is one of the better ones. However, not working with IE ?! That pretty much makes it useless doesn’t it.
    Perhaps I’m being unfair. Are we meant to develop it further ourselves to make it cross-browser compatible? Shouldn’t it be in Github if that is the case?

  45. I try it on Internet Explorer? find out had something problem on animation~
    Who can try it and let me know ? anyway to solve?thanks~

  47. I have 30 Items in menu. When I click on item no more then 20 , page move to 20 nos page but it is not the top part of that page. what I have to do.
    sorry for bed english