“Look Inside” Book Preview with BookBlock

A “look inside” book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

By in Playground on
Demo Code

There is something really fascinating about (real) books. Although we live in times where everything is digitalized by now, there is really nothing like picking up a real book and browsing through the pages. Many layouts on the web try to transmit that feeling by creating book-like experiences. On Codrops we’ve played many times with these kind of layouts, too. Today we’d like to show you a little concept for an online bookstore or book collection, using our BookBlock script. The idea is to show a grid of books where we can view some details of the book and where we can open the book to preview an excerpt. You surely know this kind of “look inside” option from Amazon, where you can have a taste of a book’s content. For the book preview we are using BookBlock in fullscreen and for the small books we use a structure with perspective that allows us to open the book in 3D.

Please note that this is just a proof-of-concept and might not work properly in older browsers.

For the book grid we use figures and this is how it looks:
BookPreview01

When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right:
BookPreview02

Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. The small book will open and scale up while the BookBlock fades in and scales up a bit. The fullscreen BookBlock shows the first preview pages:
BookPreview03

When clicking on one of the navigation arrows, we flip the respective page in 3D and reveal the next ones:
BookPreview04

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

Credits

We love playing with books in our experiments, so if you’d like to explore some similar articles and demos, check out these ones:

As mentioned before, this is an experimental concept implementation so if you find any bugs or glitches please let us know.

I hope you find this interesting and inspiring!

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.

Bringing Letters to Life: Coding a Kinetic SVG Typography Animation

On-Scroll Sliced Text Animation

Dynamic CSS Masks with Custom Properties and GSAP

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 68

Comments are closed.

  4. Nice. I think it also plays nice with another use-case: e-commerce. person clicks ‘look inside’ to find out more about the product and even view a gallery 🙂

  5. Very nice! Only one thing: Here, after clicking on “Details” the “CLOSE” button show, and disapear…

  7. A doubt .. Do you could use jpg or png instead of svg to images?

    Congratulations, great job!

  12. Looks and works awesome. Two small things I would do from a UX point:

    1. Show details or look inside when clicking on the book cover. At the moment nothing happens when clicking on the book, which seems like a missed opportunity for people to discover either feature.

    2. You have to click the X to close details view before you can click on anything else. I would have it that clicking outside the details box closes it. There is too little visual change to really warrant a close button. Its not a classic modal where it would make sense and even there will clicking outside the modal usually close it.

    I know they are very easy additions, but they are the 2 things i felt were missing in the demo. Otherwise perfect!

  14. Excellent! I really like this concept and already got plans to use on site of mine.

    Thank you for sharing your talent with is Mary Lou.

  16. I stumbled upon this site last year, but this tutorial got me to comment…

    I’m using Mary Lou’s templates on my site and they’re just great…

    But I just showed this to my family and they SCREAMED W O W!!!

    Seriously, they were mesmerized and amazed by it.

    Thank you for this.

    I gave it my usual quick spin on a few devices – seems desktop viewing is rock solid, but mobile isn’t.

    I’d test this on a tablet to see – a few glitches – covers not showing… pages not turning. I’m using an iPad 2.

    And my mobile emulator didn’t like it either – this tester ROCKS:

    mobilephoneemulator.com

    With that said, tomorrow it’s time to git ‘r done and use this on my site to wow my fans.

    Thank you SO much! You make me look like a genius designer/coder.

  20. Cool!

    Is anyone able to make a WordPress plugin using this? WooCommerce shop more specifically?

    Willing to pay.

    • Hey Muhammadibn, i’m expert wordpress developer and i can do anything with wordpress. Please contact me.

  21. Awesome work

    I always follow are web updates and i am just amazed every time i visit.

    Carry on the great work.

    May god bless u

  23. I downloaded the code, but I can’t see where the interior pages of the books are located (with the exception of the portrait .jpg). This is really good and I’d love to work with this and see what I can do with it!

  24. Really nice and excellent work, but I get error “Uncaught TypeError: Cannot read property ‘classList’ of null”, the nav close button dose not function as well, I really don’t know why, would highly appreciate if some one help me to sort out this error. bests,

  28. Hello everyone. liked this development, but there is one drawback. How to remove information about the function of closing the book on the X?

  29. Wow!! Really lovely work. How can I learn to build sites like This. Please do you have anything on parallax scrolling effect.. Thanks, you are the best

  30. Hello. I love this plugin and incorporated it onto my site. The only issue I am having is in Chrome. When I turn the page, the page flickers.. Any idea what I should do? Thanks!

    • Hi Kyle, the bookblock.css needed to be updated. You can download the ZIP file again, it should work fine now. The GitHub repo is also updated. Thanks for the feedback and let us know if it works for you. Cheers, ML

    • Got it thanks! Changed the css to this .bb-page > div,
      .bb-outer,
      .bb-content,
      .bb-inner {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      }

      .bb-outer {background:#FFF;}

      .bb-outer {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;

      }

      in boookblock.css

  32. Awesome, good job, MARY LOU
    Do you have email, i have some ideal with discuss with you!

  35. Mary Lou, thank you! You have quite literally changed my life. I am so very grateful for what you do and what you’ve given me.
    Here’s a comment for the readers:
    If you find that the x button is not working to close the book after you have “looked inside”, make sure that you have included the
    from ABOVE the Codrops header.
    Hope this helps…

  36. Thank You!!!! I am learning the code and hope to embed this item on my next proyect!!! 😀

  38. I WOULD LIKE TO KNOW IF THIS CAN WORKS WITH PDF FILES.,,,AND HOW I CAN DO THIS ????
    I SAW THE DIVS INSIDE ….THE CONTENT OF BOOKS IS WROTE BY HAND I WANT IMPORT THIS DATA FROM PDF FILES..

  39. Hi Mary,
    I just love your work!

    I’m trying to implement the book in RTL website where the pages need to go from right to left (first page on the right)
    I’ve been trying to to so for the last couple of hours but unfortunately with no success.

    I would really appreciate your help

  41. Amazing.
    i have seen the code, and i want ask a question.
    Can i change the cover without .svg ?
    I mean maybe it can change with picture.
    Please, help me.

    Thanks.

  42. Hello Mary Lou,

    I’m using your plugin in one of our website. It works fine but I’m facing two issues:

    1- On Google Chrome, when we are in fullscreen mode, the pages are flickering when we switch page. I am using the latest bookblock.css.

    2- Is there a way to make it works on IE8 and lower?

    Thank You.

    Jo.

  44. Hi Mary,

    Thanks for this lovely script. Its simply awesome!

    I am making a website for my friend who has written two novels and I want to apply this script with two modifications.

    1. How can I make the whole SVG clickable rather than just LOOK INSIDE text?
    2. How do I replace this SVG with an Image?

    Thanks and keep up the good work! I always like to come back and see where front end coding is going ahead, even though I am not a coder myself.

  46. Hi. Is it possible to customize this BOOK PREVIEW for right to left language book, like as Arabic and Persian?
    For example Persian books open reverse. Anybody can help me? tnx a lot…

  47. Your idea for bookstore is interesting. However, my impression is,
    you require .svg files for the book cover and separate .jpg files for in interior
    are lethal. The standard of this industry is using .jpg for the cover and ONE .pdf
    for the interior. I tried to modify your code but unsuccessful.

  48. Hi. This is a very cool feature and i plan to use it on my website. Is it possible to close the book’s details if the user clicks outside of the details and the box lose focus? I don’t like that the user must click on the close button. Could you tell me on which element i have to register the EventListener to solve this?

    • I would like the same thing. But cannot find any stopPropagation() or toggle() in the code. Please someone answer 🙂

  49. Why bookblock.min.js is minified? Am i not able to see how it works? I would like to inspect debug version of that file. Any ideas?

  50. It would seem that (at least here on my local computer, that the book transition is broken. When you click on the details tab, the cover dissapears into a grey background. Has anyone else had this issue?

    I’ve seen this effect work tiems before without this issue posing itself, so I am not sure as to why it is happening now. Some dependancy may have changed.

    • Never mind, it would seem that it was just an issue with my monitor setup.. Still not sure why this was happening though!

    • Hi Will, it is indeed broken, thanks for pointing that out! I’ll try to find a solution for it and I’ll update the source code ASAP. Cheers, ML.