Post
Ask Question

Working With Page Flip Using HTML5

Introduction

 
In this article, we are going to understand the working of page flip using HTML5. Page flip is just flipping different pages in continuity as we shuffle the pages of a book.
 
Here we will make use of a few JavaScript and some styles along with the HTML code.
 
Just go through the steps to know how to create this application.
 
Step 1 : Open a HTML editor or Visual studio.
 
Open File menu ->select new ->Choose Website then.
 
0000.jpg
 
This is where we will create an HTML5 application.
  • Go to Solution Explorer
  • Right Click on the Application name
  • Select Add-->add new item
  • Now in this window that opens up select an HTML page or new Web form.
0.jpg
 
00.jpg
 
Step 2: In this section, we will study about Canvas tag, Section tag for adding a new page.
 
<canvas id="pageflip-canvas"></canvas>
 
Section tag for different pages
  1. <section>  
  2.     <div>  
  3.         <h2>HISTORY OF HTML5</h2>  
  4.         <p>The Web Hypertext Application Technology Working Group began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000.In 2009. </p>  
  5.     </div>  
  6. </section>  
Step 3: Full script for book.aspx page.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="book.aspx.cs" Inherits="book" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7.         <link type="text/css" href="main.css" rel="stylesheet" media="screen" />  
  8.     </head>  
  9.     <body>  
  10.         <div id="book">  
  11.             <canvas id="pageflip-canvas"></canvas>  
  12.             <div id="pages">  
  13.                 <section>  
  14.                     <div>  
  15.                         <h2>HISTORY OF HTML5</h2>  
  16.                         <p>The Web Hypertext Application Technology Working Group began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000.In 2009. </p>  
  17.                     </div>  
  18.                 </section>  
  19.                 <section>  
  20.                     <div>  
  21.                         <h2>W3C Standardization</h2>  
  22.                         <p>The Mozilla Foundation and Opera Software presented a position paper at a W3C workshop in June 2004, focusing on developing technologies that are backwards compatible with existing browsers,including an initial draft specification of Web Forms 2.0. </p>  
  23.                     </div>  
  24.                 </section>  
  25.                 <section>  
  26.                     <div>  
  27.                         <h2>Markup</h2>  
  28.                         <p>HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements forcommon uses of generic block (  
  29.                             <div>) and inline (  
  30.                                 <span>) elements, for example   
  31.                                     <nav> (website navigation block)  
  32.                                     </p>  
  33.                                 </div>  
  34.                             </section>  
  35.                             <section>  
  36.                                 <div>  
  37.                                     <h2>Error handling</h2>  
  38.                                     <p>An HTML5 browser will be flexible in handling incorrect syntax. HTML5 is designed so that old browsers can safely ignore new HTML5 constructs. In contrast to HTML 4.01, the HTML5 specification gives detailed rules for lexing and parsing, with the intent that different compliant browsers will produce the same result in the case of incorrect syntax.</p>  
  39.                                 </div>  
  40.                             </section>  
  41.                         </div>  
  42.                     </div>  
  43.                     <script type="text/javascript" src="myflip.js"></script>  
  44.                 </body>  
  45.                 <html>  
Step 4: Now adding a style to the page see the style code below for the main.css file.
  1. body, h2, p {  
  2.   margin: 0;  
  3.   padding: 0;  
  4. }  
  5. body {  
  6.   background-color: #444;  
  7.   color: #333;  
  8.   font-family: Helvetica, sans-serif;  
  9. }  
  10. #book {  
  11.   background: url("book.png") no-repeat;  
  12.   position: absolute;  
  13.   width: 830px;  
  14.   height: 260px;  
  15.   left: 50%;  
  16.   top: 50%;  
  17.   margin-left: -400px;  
  18.   margin-top: -125px;  
  19. }  
  20. #pages section {  
  21.   background: url("paper.png") no-repeat;  
  22.   display: block;  
  23.   width: 400px;  
  24.   height: 250px;  
  25.   position: absolute;  
  26.   left: 415px;  
  27.   top: 5px;  
  28.   overflow: hidden;  
  29. }  
  30. #pages section>div {  
  31.   display: block;  
  32.   width: 400px;  
  33.   height: 250px;  
  34.   font-size: 12px;  
  35. }  
  36. #pages section p,  
  37.        #pages section h2 {  
  38.   padding: 3px 35px;  
  39.   line-height: 1.4em;  
  40.   text-align: justify;  
  41. }  
  42. #pages section h2 {  
  43.   margin: 15px 0 10px;  
  44. }  
  45. #pageflip-canvas {  
  46.   position: absolute;  
  47.   z-index: 100;  
  48. }  
Step 5: Some of the snippets of the myflip.js file.
  1. // List of all the page elements in the DOM  
  2. var pages = book.getElementsByTagName("section");  
  3. // Organize the depth of our pages and create the flip definitions  
  4. for (var i = 0, len = pages.length; i < len; i++) {  
  5.  pages[i].style.zIndex = len - i;  
  6.  flips.push({  
  7.   // Current progress of the flip (left -1 to right +1)  
  8.   progress: 1,  
  9.   // The target value towards which progress is always  
  10.   target: 1,  
  11.   // The page DOM element related to this flip  
  12.   page: pages[i],  
  13.   // True while the page is being dragged  
  14.   dragging: false  
  15.  });  
  16. }  
Step 6: Here is your output, when you run the application by pressing F5.
 
Page 1
 
1.jpg
 
2.jpg
 
Page 2
 
3.jpg
 
 00000.jpg
 
Page 3
  00998089.jpg
 
Here are some resources which may help you.
 


Similar Articles