Page Flip Effect for HTML5

Page flip effect on button press in html5

Yes that can be done.

From what i can see, you need a click event that doesnt trigger the page drag. You need to assign a flag for this.

Let Drag = mouse drag/mouse move, down = mouse down, release = mouse release events respectively.
Initialize your flag variable as false. When a drag event is encountered it becomes true. Otherwise it remains false. As long as it is false when the mouse release event occurs it can be treated as a click. Thats the basic principle behind using mousedown and mouseup as a click event.

You will have to use e.srcElement or e.target to give you the element your cursor is currently positioned over inorder to trigger click functions relative to that element.

If you want a more detailed explanation on the page flip technique then check this out. Helped me lot.

How to do a JavaScript HTML 5 Canvas image page flip like you commonly see in Flash?

You might have a look at another (nice one) implementation of HTML5-based page flipper: http://jpageflipper.codeplex.com/

It's really nice and it's implemented as a jQuery plugin.

Looking for a HTML5 / Javascript PDF Page Flipper

Mozilla has been working on a JS-only PDF renderer for a while:

https://github.com/mozilla/pdf.js

Here's a demo of it in action:

http://mozilla.github.com/pdf.js/web/viewer.html

But this is a proof-of-concept HTML5 library and it is cutting-edge. If you need to support a lot of browsers, you're stuck with Flash or rendering the PDF as graphics, neither of which is an attractive option.

iBooks-like page flip in JavaScript and CSS?

Turn.js seems to be a good starting point. The code is up on GitHub.

---

Related Topics