The code required to power the page flip is not very complex, but it is quite extensive since it involves a lot of procedurally generated graphics. A background image containing the paper texture and brown book jacket is added to the book element. The div has a fixed width and the section is set to hide its overflow, this results in the width of the section acting as a horizontal mask for the div. Inside of the section element there is a div wrapper for the content - we need this to be able to change the width of the page without affecting the layout of its contents. We have one main container element for the book, which in turn contains the different pages of our book and the canvas element that we will be drawing the flipping pages on. The markup required for this is minimal: For that reason, the content we will be working with is put directly in the DOM and then manipulated by JavaScript if it is available. It's always important to remember that what we draw on canvas can't be indexed by search engines, selected by a visitor or found by in-browser searches. Some of the rudimentary code, such as variable declarations and event listener subscription, has been left out of the snippets in this article so remember to reference the working example.īefore we get started it's a good idea to check out the demo so that you know what we're aiming to build. This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. A lot of effort went into the graphical and interactive treatment of the reading flow - especially how the pages of the books flip from one page to another. Book cover and homepage of "20 Things I Learned About Browsers and the Web" ( We decided that the best way to achieve the feeling of a real world book is to simulate the good parts of the analogue reading experience while still leveraging the benefits of the digital realm in areas such as navigation. Since the contents of the book is very much about open web technologies we felt it was important to stay true to that by making the container itself an example of what these technologies allow us to accomplish today. In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web ( One of the key ideas behind this project was that it would best be presented in the context of a book.
0 Comments
Leave a Reply. |