Page Flip plugin is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. The primary features of Page Flip Plugin:

Works on iPad and iPhone.
Simple, beautiful and powerful API.
Allows to load pages dynamically through Ajax requests.
Pure HTML5/CSS3 content.
Two transition effects.
Works in old browsers such as IE 8 with turn.html4.js

Live Demo

The Bible

Page: of

How to Use

Add the css below to your html page

<style type="text/css">
    body {
        background: #ccc;
    }

    #book {
        width: 800px;
        height: 500px;
    }

    #book .turn-page {
        background-color: white;
    }

    #book .cover {
        background: #333;
    }

    #book .cover h1 {
        color: white;
        text-align: center;
        font-size: 50px;
        line-height: 500px;
        margin: 0px;
    }

    #book .loader {
        background-image: url(loader.gif);
        width: 24px;
        height: 24px;
        display: block;
        position: absolute;
        top: 238px;
        left: 188px;
    }

    #book .data {
        text-align: center;
        font-size: 40px;
        color: #999;
        line-height: 500px;
    }

    #controls {
        width: 800px;
        text-align: center;
        margin: 20px 0px;
        font: 30px arial;
    }

    #controls input,
    #controls label {
        font: 30px arial;
    }

    #book .odd {
        background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
        background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
    }

    #book .even {
        background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
        background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
    }

    #magazine {
        width: 1152px;
        height: 752px;
    }

    #magazine .turn-page {
        background-color: #ccc;
        background-size: 100% 100%;
    }
</style>

Create a container where you want to render Page Flip

<div id="book">
    <div class="cover">
        <h1>The Bible</h1>
    </div>
</div>

<div id="controls">
    <label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span
        id="number-pages"></span>
</div>

<div id="magazine">
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
</div>

Load jQuery library together with the Page Flip library into your code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../turn.min.js"></script>
<script type="text/javascript">
    // Sample using dynamic pages with turn.js

    var numberOfPages = 1000;


    // Adds the pages that the book will need
    function addPage(page, book) {
        // 	First check if the page is already in the book
        if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />', {
                'class': 'page ' + ((page % 2 == 0) ? 'odd' : 'even'),
                'id': 'page-' + page
            }).html('<i class="loader"></i>');
            // If not then add the page
            book.turn('addPage', element, page);
            // Let's assum that the data is comming from the server and the request takes 1s.
            setTimeout(function () {
                element.html('<div class="data">Data for page ' + page + '</div>');
            }, 1000);
        }
    }

    $(window).ready(function () {
        $('#book').turn({
            acceleration: true,
            pages: numberOfPages,
            elevation: 50,
            gradients: !$.isTouch,
            when: {
                turning: function (e, page, view) {

                    // Gets the range of pages that the book needs right now
                    var range = $(this).turn('range', page);

                    // Check if each page is within the book
                    for (page = range[0]; page <= range[1]; page++)
                        addPage(page, $(this));

                },

                turned: function (e, page) {
                    $('#page-number').val(page);
                }
            }
        });

        $('#number-pages').html(numberOfPages);

        $('#page-number').keydown(function (e) {

            if (e.keyCode == 13)
                $('#book').turn('page', $('#page-number').val());

        });

        $('#magazine').turn({
            width: 400,
            height: 300,
            autoCenter: true,
            display: 'double',
            acceleration: true,
            gradients: !$.isTouch,
            elevation: 50,
            when: {
                turned: function (e, page) {
                }
            }
        });

    });

    $(window).bind('keydown', function (e) {

        if (e.target && e.target.tagName.toLowerCase() != 'input') {
            if (e.keyCode == 37) {
                $('#book').turn('previous');
                $('#magazine').turn('previous');
            } else if (e.keyCode == 39) {
                $('#book').turn('next');
                $('#magazine').turn('next');
            }
        }

    });
</script>