How to Create HTML5 Page Flip from Your PDF Publication

Step-by-Step Guide

1. 1

   Step 1: Split your publication into individual pictures.

   There are various software programs that can do this for you online.
2. 2

   Step 2: Rename the converted images in the following format: -.e.g.

   (book-0.png). , Make sure you name the folder something you can remember, e.g. "book1". , Rename the newly created folder to the name of your publication, e.g. "issue3". ,, A good library to use is "http://livelypaper.com/demo".
   
   If you decide to use livelypaper library, then copy the file livelypaper.js into the folder created in step
   4.
   
   Then proceed to create an html file the file should have JavaScript code similar to the following ready(function() Lpflipbook({ filePath: "book"
   
   startPage: 0, endPage: 4, format: "png"
   
   fileName: "page" }); })
3. 3

   Step 3: Insert the images generated from step 1 into a folder.

   , Your flipbook should be ready.
   
   Upload the files to your web server!
4. 4

   Step 4: Create another folder.

5. 5

   Step 5: Put the folder containing the converted images into the folder created during the previous step.

6. 6

   Step 6: Get JavaScript HTML5 libraries that can do the page flip effect for you.

7. 7

   Step 7: Insert a div tag inside the html file.

Detailed Guide

About the Author