Shulou(Shulou.com)06/01 Report--

Editor to share with you how to develop HTML5 page turning effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

E-book structure

You must always keep in mind that all the information drawn in canvas cannot be found by search engines or by users in browsers. For this reason, we display the text content in DOM, and then JavaScript manipulates it. So the structure of e-books is very simple:

XML/HTML Code copies content to the clipboard

The structure of the e-book contains a main container that contains all the pages and the canvas elements used to draw the page flip effect. There is a div element in the section element, which contains the content of the ebook page, and we can adjust the width of the div without affecting the layout of the page content. The div has a fixed width, while the section setting overflow hides, so that the section element actually acts as a mask for the horizontal direction of the div.

Open the ebook and you can see a background picture that contains the material of the paper and the effect of the book.

Logic

The code to achieve the page turning effect is not very complex, but there is a large amount of code, because there are a lot of graphic effects that need to be implemented in code. Let's start with the constant in the code, which is used throughout the program.

JavaScript Code copies content to the clipboard

Var BOOK_WIDTH = 830

Var BOOK_HEIGHT = 260

Var PAGE_WIDTH = 400

Var PAGE_HEIGHT = 250

Var PAGE_Y = (BOOK_HEIGHT-PAGE_HEIGHT) / 2

Var CANVAS_PADDING = 60

CANVAS_PADDING is the white space around the canvas, so that when turning the page, the page can exceed the size of the book. It is important to note that some of the constants set here also set these values in CSS, so if you want to change the size of the book, you also need to change the corresponding values in CSS.

Constants throughout the code that track mouse interactions and draw flip pages

The next step is to define a flip object for each page, which is constantly updated to reflect the current state of the page during the page flip interaction.

JavaScript Code copies content to the clipboard

/ / Create a reference to the book container element

Var book = document.getElementById ("book")

/ / Grab a list of all section elements (pages) within the book

Var pages = book.getElementsByTagName ("section")

For (var I = 0, len = pages.length; I

< len; i++ ) { pages[i].style.zIndex = len - i; flips.push( { progress: 1, target: 1, page: pages[i], dragging: false }); } 首先我们要保证section元素的z-index被有序的排列，这样页面才可以正确的排序，也就是说第一页在上面，最后一页在最下面。flip对象最重要的属性是progress和target值。它们用来定义翻动页面折叠的大小，-1表示整页翻到左边，0表示翻到书的中间位置，+1表示整页翻到书的最右边。 Progress和target值用来定义页面的折叠量，可以是-1到+1之间的值. 现在每个页面都有自己的flip对象了，下面我们学获取用户的鼠标位置，并根据这个值开始翻页。 JavaScript Code复制内容到剪贴板 function mouseMoveHandler( event ) { // Offset mouse position so that the top of the book spine is 0,0 mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 ); mouse.y = event.clientY - book.offsetTop; } function mouseDownHandler( event ) { // Make sure the mouse pointer is inside of the book if (Math.abs(mouse.x) < PAGE_WIDTH) { if (mouse.x < 0 && page - 1 >

= 0) {

/ / We are on the left side, drag the previous page

Flips [page-1] .dragging = true

}

Else if (mouse.x > 0 & & page + 1 < flips.length) {

/ / We are on the right side, drag the current page

Flips[ page] .dragging = true

}

}

/ / Prevents the text selection

Event.preventDefault ()

}

Function mouseUpHandler (event) {

For (var I = 0; I < flips.length; iTunes +) {

/ / If this flip was being dragged, animate to its destination

If (flips [I] .dragging) {

/ / Figure out which page we should navigate to

If (mouse.x < 0) {

Flips[ I] .target =-1

Page = Math.min (page + 1, flips.length)

}

Else {

Flips[ I] .target = 1

Page = Math.max (page-1,0)

}

}

Flips[ I] .dragging = false

}

}

The mouseMoveHandler method updates the contents of the mouse object in real time so that we can get the exact location of the mouse.

In mouseDonwHandler, check whether the mouse is pressed on the left or right side of the book, and remember to know the direction of turning the page. I also need to know if there is a page on the next page, because we will encounter the first or last page. If all flip options are detected without problems, set the dragging property of the flip object to true.

In mouseUpHandler, we detect whether each page has been dragged, and if so, release the drag of that page. After you stop dragging, the page flips forward or backward based on the position of the mouse. At the same time, the page of the page will also be updated as the navigation of the page.

Render

Now that most of the logic is done, let's learn how to render a folded page in the canvas element. Most of these rendering effects are done in the render () method, which is performed 60 times per second to update the status of the flipped page in real time.

JavaScript Code copies content to the clipboard

Function render () {

/ / Reset all pixels in the canvas

Context.clearRect (0,0, canvas.width, canvas.height)

For (var I = 0, len = flips.length; I < len; iTunes +) {

Var flip = flips [I]

If (flip.dragging) {

Flip.target = Math.max (Math.min (mouse.x / PAGE_WIDTH, 1)-1)

}

/ / Ease progress towards the target value

Flip.progress + = (flip.target-flip.progress) * 0.2

/ / If the flip is being dragged or is somewhere in the middle

/ / of the book, render it

If (flip.dragging | | Math.abs (flip.progress) < 0.997) {

DrawFlip (flip)

}

}

}

Before you start rendering, reset the canvas using the clearRect (xmemyrew.h) method. Resetting the entire canvas canvas can greatly degrade the performance of the operation, compared with the efficiency of just resetting the parts that need to be redrawn. But in order not to deviate from the topic of this tutorial, let's reset a more canvas canvas.

If the page is dragging, its target value is set to the position of the mouse coordinates relative to the width of the ebook, rather than the actual pixel value. At the same time, progress will also be slightly increased to the target value, so that the flip will be updated every frame, which will result in the smooth flip animation of the page we see.

Because every frame traverses all the pages, we need to make sure that only the currently active pages are redrawn. If the page flip is not very close to the edge of the book (0.3% of the BOOK_WIDTH), or if the flagged property value of the page is dragging, we consider the page to be the currently active page.

Now that all the logical operations have been completed, you need to draw the flip page effect according to the current state of the page. Let's look at the first part of the drawFlip () method for pancreatic cancer.

JavaScript Code copies content to the clipboard

/ / Determines the strength of the fold/bend on a 0-1 range

Var strength = 1-Math.abs (flip.progress)

/ / Width of the folded paper

Var foldWidth = (PAGE_WIDTH * 0.5) * (1-flip.progress)

/ / X position of the folded paper

Var foldX = PAGE_WIDTH * flip.progress + foldWidth

/ / How far outside of the book the paper is bent due to perspective

Var verticalOutdent = 20 * strength

/ / The maximum widths of the three shadows used

Var paperShadowWidth = (PAGE_WIDTH*0.5) * Math.max (Math.min (1-flip.progress, 0)

Var rightShadowWidth = (PAGE_WIDTH*0.5) * Math.max (Math.min (strength, 0.5), 0)

Var leftShadowWidth = (PAGE_WIDTH*0.5) * Math.max (Math.min (strength, 0.5), 0)

/ / Mask the page by setting its width to match the foldX

Flip.page.style.width = Math.max (foldX, 0) + "px"

This part of the code starts with the calculation of variables that are used to draw real page flipping effects. The Progress variable plays the most important role among these variables because it is where the page is flipped to. To add depth, we let the page go beyond the boundaries of the book, and when the page is flipped to the spine, the excess reaches the limit.

The effect of folding when the page is flipped.

Now all the values are in place, everything is ready, all that is needed is to draw the page!

JavaScript Code copies content to the clipboard

Context.save ()

Context.translate (CANVAS_PADDING + (BOOK_WIDTH / 2), PAGE_Y + CANVAS_PADDING)

/ / Draw a sharp shadow on the left side of the page

Context.strokeStyle = 'rgba (0 strength) +')'

Context.lineWidth = 30 * strength

Context.beginPath ()

Context.moveTo (foldX-foldWidth,-verticalOutdent * 0.5)

Context.lineTo (foldX-foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5))

Context.stroke ()

/ / Right side drop shadow

Var rightShadowGradient = context.createLinearGradient (foldX, 0

FoldX + rightShadowWidth, 0)

RightShadowGradient.addColorStop (0 rgba (0 strength*0.2) + (0)

RightShadowGradient.addColorStop (0.8, 'rgba')

Context.fillStyle = rightShadowGradient

Context.beginPath ()

Context.moveTo (foldX, 0)

Context.lineTo (foldX + rightShadowWidth, 0)

Context.lineTo (foldX + rightShadowWidth, PAGE_HEIGHT)

Context.lineTo (foldX, PAGE_HEIGHT)

Context.fill ()

/ / Left side drop shadow

Var leftShadowGradient = context.createLinearGradient (

FoldX-foldWidth-leftShadowWidth, 0, foldX-foldWidth, 0)

LeftShadowGradient.addColorStop (0, 'rgba')

LeftShadowGradient.addColorStop (1, 'rgba (0penny 0penny + (strength*0.15) +'))

Context.fillStyle = leftShadowGradient

Context.beginPath ()

Context.moveTo (foldX-foldWidth-leftShadowWidth, 0)

Context.lineTo (foldX-foldWidth, 0)

Context.lineTo (foldX-foldWidth, PAGE_HEIGHT)

Context.lineTo (foldX-foldWidth-leftShadowWidth, PAGE_HEIGHT)

Context.fill ()

/ / Gradient applied to the folded paper (highlights & shadows)

Var foldGradient = context.createLinearGradient (

FoldX-paperShadowWidth, 0, foldX, 0)

FoldGradient.addColorStop (0.35,'# fafafa')

FoldGradient.addColorStop (0.73,'# eeeeee')

FoldGradient.addColorStop (0.9,'# fafafa')

FoldGradient.addColorStop (1.0,'# e2e2e2')

Context.fillStyle = foldGradient

Context.strokeStyle = 'rgba (0penol 0pl 0pl 0.06)'

Context.lineWidth = 0.5

/ / Draw the folded piece of paper

Context.beginPath ()

Context.moveTo (foldX, 0)

Context.lineTo (foldX, PAGE_HEIGHT)

Context.quadraticCurveTo (foldX, PAGE_HEIGHT + (verticalOutdent * 2)

FoldX-foldWidth, PAGE_HEIGHT + verticalOutdent)

Context.lineTo (foldX-foldWidth,-verticalOutdent)

Context.quadraticCurveTo (foldX,-verticalOutdent * 2, foldX, 0)

Context.fill ()

Context.stroke ()

Context.restore ()

In canvas's API, the tranlate (XMagy) method is used to move the coordinate system of the canvas so that we can draw a flipped page with the top of the spine as the origin of (0Power0). Note that we need to use the save () method to save the transformation of the current canvas, and call the restore () method when the transformation is complete.

To draw the starting point of the flipped page, move it from the upper left corner of the canvas to the top of the spine, in the same way as the translate (xPowery) method, which simplifies the logic of drawing.

The foldGradient method is used to fill the folded page while drawing realistic highlights and shadows. At the same time, I also drew a narrow black edge for the page to prevent the page from "disappearing" in a brighter background.

Now all that's left is to draw the folded page with the variables we defined earlier. The left and right sides of the page are drawn with straight lines, and curved curves are drawn at the top and bottom, creating a feeling of paper folding. The degree to which the page is folded is determined by the verticalOutent value.

The above is all the content of the article "how to develop the page turning effect of HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.