BookBlock Revised

The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we’ve added support for RTL among other things.

By Manoela Ilic in Articles on
BookBlock Revised
Demo Code

We’ve updated BookBlock, the content flip plugin. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what options are available.

Demos

We’ve updated the demos and added some different examples:

Summary of Changes

  • Removal of unnecessary and outdated prefixes in the CSS
  • Many styles that were added with JS before are now in the stylesheet. This allows for a better control.
  • We’ve added support for horizontal flipping (see demo 2)
  • We’ve added support for RTL (see demo 3)
  • We’ve added methods for going to the first and last page
  • There is a Vanilla JS version of the plugin

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.

Cyberpunk inspired Three.js Scene with JavaScript and Blender

Repetitive Typography Animation

Creating Dynamic Terrain Deformation with React Three Fiber

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 45

Comments are closed.

  1. Awesome :D! Actually I was looking for somthing like this some month ago, love it! thanks!

  3. outdated prefixes in the CSS

    Would it be possible to explain which prefixes are no longer necessary?

  5. Is there a way to remove the flicker effect on the iphone? Besides that seems to work great.

  6. thank you very much for always supporting the design and creativity. The tutorials are really useful and instructive.

  12. where do it put the onEndFlip : function( page, isLimit ) { return false; } ? tried it everywhere I can think of – we could use a demo of it looping maybe?

    Thanks for the great work

  15. its awesome, how to change a horizontal transition from top to bottom as default?

  16. Hey
    This is a great plug-in and I absolutely love it.
    I have been experimenting a lot with it and I found one issue that I can’t fix!
    I have been using demo 4 and when I put photos onto pages, it works great. Plus, when you re-size the browser window the photo decreases (or increases) in size along with it – all good so far.
    Is there a way to keep the entire book, aspect fixed? The same as though you were re-sizing a PDF, for example?
    So that when a user re-sizes a browser to an extreme the photo doesn’t become distorted and will always show at the same aspect ratio as it was meant to be.
    I showed this plug-in to a photographer and he loved it but didn’t want to use it because if this. I can sort of understand his point – anyone have an idea on how to fix this??
    Many thanks
    Rob

  17. can any one help me………..
    how to use this in asp.net..
    pls………………..

  18. Wonderful, I was studying this solution when I saw the update.
    May I ask a question:
    How can I hide/show the toolbar (or navbar) on full screen example?

    I’m preparing my site, and I’m seeking a pretty solution for comic reading online.
    Of course, later I’ll had to find a solution for format, but one thing at a time.
    Anyway, many thanks for your amazing shared work. Muchas gracias.

  19. these articles and demos are always so great and always an inspiring way to start my day. thanks for the continuous effort! 🙂

  20. This is very awesome. Is there a way to have a dynamic height per slide? Or does a set height have to set via CSS? I’m wondering if we can use JS to specify the height per slide.

  21. I have a wonder. How to make this on flip effect like in the demo Experimental Page Layout Inspired by Flipboard but without the front and back cover page. It would bring more nice effect. Any idea or suggestion how to do ?

    • Did you ever figure out a way to not have the front and back? The site that led me here http://www.leggiadro.com/lookbook/ seems to have figured it out. This is what I need to copy and I’m not a coder. I’m lost how to begin and hoping to find some direction/tutorial of the steps. Thanks.

  22. Hello! Can you make a full width background image instead of just a background colour? Because I tried but my background image splited half.

  23. config.$bookBlock.bookblock is not a function

    and images are not display in the page though the path are exact

  26. how to use this plugin for dynamic page..am using it for jquery mobile..it does not working..how to implement it

  27. i need a jquery (like flipboard ) for dynamic pages..am retrieving the latest post through json..i want to implement a flipboard animations

  28. Hi Pedro, for Chrome and Firefox work very good, but don´t work for IE, How I can search a solution?

    Thanks.

  29. Hello Pedro, I’ve been tinkering with Bookblock and am impressed with it. Great stuff! Could be good for sample pages of layout work.

    I began by previewing results in Safari where all looked good but on opening the same test files in Firefox (and reportedly IE from a friend who viewed what I’d been doing) there was a major difference. In Safari I was able to load PDF pages and they displayed and flipped just fine. In Firefox and IE PDFs do not display. I can convert the pages to Jpeg and they work but text rendering is poor by comparison with PDF.

    Any idea why PDFs display in Safari but not Firefox and IE? Have you noticed this and maybe found a workaround for good text display?

    Many thanks
    Pete

  30. Hi Pedro
    I am having an issue with Chrome & Safari only recently that the page flip is now flickering see – http://bondichai.com.au/the-perfect-recipe/
    Your example is fine on this site but if I download the sample files and then view locally they are flickering also. Is there something I’m missing or is this something new with Chrome v33

    • Hi Glen, there was indeed an update to the bookblock.css file. The changes were only made in the GitHub repo though, my mistake. The zip file is now updated! Let me know if it works for you. Cheers.

  31. Hello Pedro… great plugin, but im stuck on a problem that i can’t solve cause im kinda new in the JavaScript world.
    In the previous (not revised) tutorial you said that to get the current page index we need:
    var current = 0;
    $(‘#bb-bookblock’).bookblock({
    onEndFlip : function(page){
    current = page;
    }
    });

    i need this so i can sync different audio on different page and autoplay it (not with a button) which i know how to do but i need the current page number and with the code that you provided above i don’t get it for some reason…maybe i put it in the wrong place in the code, or i do something terribly wrong with the syntax 🙂 i don’t know if i should use onBeforeFlip, onEndFlip or just get the current variable from the plugin but i don’t know how…please help.

    Thanks.

    • Try replacing onEndFlip : function(page) with onEndFlip : function(old, page, isLimit). Let me know if it works. Cheers

  32. HI Pedro, thanks for the reply.

    I tried what you suggested about replacing onEndFlip but i still don’t get the index of the page…i call the function right below the tag and the global variable current initialized on 0, and i put a alert(“Page is:” +current) right below config.$bookBlock.bookblock( ‘next’ ); where i add the navigation events so i can get the alert and the index every time i click next just for checking and debugging and all i get is “Page is: 0” on every slide…i hope im not doing something terribly wrong on my side.

  33. var current = 0;
    $(‘#bb-bookblock’).bookblock({
    onEndFlip : function(old, page, isLimit){
    current = page;
    }
    });

    var Page = (function() {

    var config = {
    $bookBlock : $( ‘#bb-bookblock’ ),
    $navNext : $( ‘#bb-nav-next’ ),
    $navPrev : $( ‘#bb-nav-prev’ ),
    $navFirst : $( ‘#bb-nav-first’ ),
    $navLast : $( ‘#bb-nav-last’ ),
    },

    init = function() {
    config.$bookBlock.bookblock( {
    speed : 1000,
    shadowSides : 0.8,
    shadowFlip : 0.4,
    } );
    initEvents();
    },
    initEvents = function() {

    var $slides = config.$bookBlock.children();

    // add navigation events

    config.$navNext.on( ‘click touchstart’, function() {
    config.$bookBlock.bookblock( ‘next’ );
    alert(“Page is: ” +current);
    /////////////////////////////////////////////////////////////////
    var allaudio = document.getElementsByClassName(‘audio’);
    for( var i=0; i<allaudio.length; i++)
    {
    allaudio[i].pause();
    allaudio[i].src = allaudio[i].src;
    }
    /////////////////////////////////////////////////////////////////
    return false;
    } );

    Here is what i do… and on every next click i get "Page is: 0"

    • The onEndFlip function declaration
      onEndFlip : function(old, page, isLimit){ current = page; }

      should be inside of the initialization of the BookBlock which in your case is inside the init function. So your init function should look like:
      init = function() { config.$bookBlock.bookblock( { speed : 1000, shadowSides : 0.8, shadowFlip : 0.4, onEndFlip : function(old, page, isLimit){ current = page; } } ); initEvents(); }

      I think this should solve your problem.
      Cheers

  34. Hi, very nice plugin. I was wondering if there a possibility (and how to do that) for small tablets and smartphones switch to one page version. What I mean is to target the narrow screens and in place of twi horizontal pages make flip page by page, like in FullscreenBookBlock plugin?

    Thanks

  35. Hi,

    Love your plugin.
    But since I’ve started using LESS for my css, when turning BookBlock pages I see like a delay of application of styles defined with LESS rules …
    What does it have to do with?

    Thanks

  36. I am having a visibility issue and am uncertain of how to resolve it. I used demo 1 as a base, then changed the size in .bb-bookblock { to be 612px wide x 387px high. When I test it part of the book (bottom and right sides) disappears when the transition is happening, then reappears when it is done. What do I need to adjust to fix this? Sorry, not super experienced with transforms.

  37. Super cool demo, I like it. One thing, was restructuring some of the demos, and am having problems getting buttons within the bb-bookblock to work consistently. The first page with buttons will work, but subsequent pages will not.

  38. Hi Pedro ,

    ” config.$bookBlock.bookblock is not a function” and images are not display in the page though the path are exact . Where is the problem ?