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 in News & Updates on
BookBlock Revised
View demo Download Source

From our sponsor: Elevate all your marketing with Mailchimp Smarts.

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
Find this project on Github

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

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