In mouseDownHandler we start by checking if the mouse was pressed down on either the left or the right page so that we know which direction we want to start flipping towards. The mouseMoveHandler function updates the mouse object so that we are always working towards the most recent cursor location. Page = page + 1 < flips.length ? page + 1 : page } else if (mouse.x > 0 & page + 1 = 0 ? page - 1 : page
![flip html5 word templates flip html5 word templates](https://web3mantra.com/wp-content/uploads/2011/05/Rockit.jpg)
Mouse.y = event.clientY - book.offsetTop Mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 ) Offset mouse position so that the top of the spine is 0,0
#Flip html5 word templates update#
Now that we have a flip object defined for each page we need to start capturing and using the user’s input to update the state of the flip. The progress and target values of the flips are used to determine where the folding page should be drawn on a -1 to +1 scale Note that some of the constants defined here are also set in CSS, so if you want to change the size of the book you will also need to update the values there. The CANVAS_PADDING is added around the canvas so that we can have the paper extend outside of the book when flipping.
![flip html5 word templates flip html5 word templates](https://fliphtml5.com/images/feature-page/designflipbook.jpg)
Var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2 Let’s start by looking at the description of the constant values we’ll be using throughout the code. 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. This results in the width of the section acting as a horizontal mask for the div. The div has a fixed width and the section is set to hide its overflow.
![flip html5 word templates flip html5 word templates](https://web3mantra.com/wp-content/uploads/2011/05/Internet-Technology-consultants.jpg)
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.