Introduction
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 (www.20thingsilearned.com). One of the key ideas behind this project was that it would best be presented in the context of a book. 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.
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. 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.
Getting Started
This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. 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.
Before we get started it's a good idea to check out the demo so that you know what we're aiming to build.
Markup
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. 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. The markup required for this is minimal:
<div id='book'>
<canvas id='pageflip-canvas'></canvas>
<div id='pages'>
<section>
<div> <!-- Any type of contents here --> </div>
</section>
<!-- More <section>s here -->
</div>
</div>
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. 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. 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
.
Logic
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. Let's start by looking at the description of the constant values we'll be using throughout the code.
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;
The CANVAS_PADDING
is added around the canvas so that we can have
the paper extend outside of the book when flipping. Note that some 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.
Next we need to define a flip object for each page, these will constantly be updated as we interact with the book to reflect the current status of the flip.
// 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
});
}
First we need to make sure the pages are layered correctly by
organizing the z-indexes of the section elements so that the first
page is on top and the last page is in the bottom. The most important
properties of the flip objects are the progress
and target
values.
These are used to determine how far the page should currently be
folded, -1 means all the way to the left, 0 means the dead center
of the book and +1 means the right most edge of the book.
Now that we have a flip object defined for each page we need to start capturing and using the users input to update the state of the flip.
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; i++ ) {
// 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
function updates the mouse
object so that we
are always working towards the most recent cursor location.
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. We also ensure that
another page exists in that direction since we might be on the first
or last page. If a valid flip option is available after these checks,
we set the dragging
flag of the corresponding flip object to true
.
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. When a flip is released we set its target value to match
the side it should flip to depending on the current mouse position.
The page number is also update to reflect this navigation.
Rendering
Now that most of our logic is in place we'll go through how to
render the folding paper onto the canvas element. Most of this happens
inside of the render()
function, which is called 60 times
per second to update and draw the current state of all active flips.
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; i++ ) {
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 we start rendering the flips
, we reset the
canvas by using the clearRect(x,y,w,h)
method. Clearing the whole canvas
comes at a big performance expense and it would be much more efficient
to clear only the regions that we are drawing on. For the sake of
keeping this tutorial on topic, we'll leave it at clearing the whole
canvas.
If a flip is being dragged we update its target
value to match the
mouse position but on a -1 to 1 scale rather than actual pixels.
We also increment the progress
by a fraction of the distance to
the target
, this will result in a smooth and animated progression
of the flip since it updates on every frame.
Since we are going over all of the flips
on every frame, we need to
make sure we only redraw the ones that are active. If a flip is not
very close to the book edge (within 0.3% of BOOK_WIDTH
), or if it is
flagged as dragging
, it is considered active.
Now that all of the logic is in place, we need to draw the graphical
representation of a flip depending on its current state. It's time to
look at the first part of the drawFlip(flip)
function.
// 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.5), 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 section of the code starts by calculating a number of visual
variables that we need to draw the fold in a realistic manner. The
progress
value of the flip we are drawing plays a big part here, since
that is where we want the page fold to appear. To add depth to the page
flip effect we make the paper extend outside of the top and bottom
edges of the book, this effect is at its peak when a flip is close to
the book's spine.
Now that all of the values are prepared, all that remains is drawing the paper!
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,0,0,`+(0.05 * 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,0,0,`+(strength*0.2)+`)`);
rightShadowGradient.addColorStop(0.8, `rgba(0,0,0,0.0)`);
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(0,0,0,0.0)`);
leftShadowGradient.addColorStop(1, `rgba(0,0,0,`+(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(0,0,0,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();
The canvas API's translate(x,y)
method is used to offset the
co-ordinate system so that we can draw our page flip with the top of the
spine acting as the 0,0 position. Note that we also need to save()
the
current transformation matrix of the canvas and restore()
to it
when we are done drawing.
The foldGradient
is what we will fill the shape of the folded paper with
to give it realistic highlights and shadows. We also add a very thin line
around the paper drawing so that the paper doesn't disappear when put
against light backgrounds.
All that remains now is drawing the shape of the folded paper using the
properties we defined above. The left and right sides of our paper is drawn
as straight lines and the top and bottom sides are curved to bring that bent
feeling of a folding paper across. The strength of this paper bend is
determined by the verticalOutdent
value.
That's it! You've now got a fully functional page flip navigation in place.
Page Flip Demo
The page flip effect is all about communicating the right interactive feel so looking at images of it doesn't exactly do it justice.
Next Steps
This is only one example of what can be accomplished by utilizing HTML5 features such as the canvas element. I recommend you have a look at the more refined book experience from which this technique is an excerpt at: www.20thingsilearned.com. There you will see how the page flips can be applied in a real application and how powerful it becomes when paired with other HTML5 features.
References
- Canvas API specification