This will result in a smooth and animated progression of the flip since it updates on every frame. We also increment the progress by a fraction of the distance to the target.
Flip book html 5 update#
If the flip is being dragged we update its target to match the mouse position but on a -1 to 1 scale rather than actual pixels.
Flip book html 5 code#
The next block of code we are going to cover is inside of the render function, which is called 60 times per second to update and draw the current state of all active flips.įlip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 ) įlip.progress += ( flip.target - flip.progress ) * 0.2 The page number is also updated to reflect this navigation. When a flip is released we set its target value to match the side it should flip to depending on the current mouse position. Once we reach the mouseUpHandler we go through all of the flips and check if any of them were flagged as dragging and should now be released. If a valid flip option is available after these checks, we set the dragging flag of the corresponding flip object to true.
We also ensure that another page exists in that direction since we might be on the first or last page. 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 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 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. 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. 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.
0 kommentar(er)
