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:
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:
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:
When clicking on one of the navigation arrows, we flip the respective page in 3D and reveal the next ones:
CREDITS
- Backpack Illustration by Tom Loots
- Boy portrait by CI W P Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0)
- Library photo by Germán Póo-Caamaño Attribution 2.0 Generic (CC BY 2.0)
We love playing with books in our experiments, so if you'd like to explore some similar articles and demos, check out these ones:
- BookBlock: A Content Flip Plugin
- 3D Book Showcase
- Animated Books with CSS 3D Transforms
- Experimental Page Layout Inspired by Flipboard
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!
No comments:
Post a Comment