The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    The page flip effect for HTML5
    Filed under 

    • 🔾60%Overall
    • 7,155
    • 131.9 days
    • 🕩2453
    • 👥3

    Bilby Stampede

    Get the turn.js 4th release on

    What's new in turn.js 4th release?

    • Added option autoCenter

    • Added option zoom

    • Added property animating

    • Added property zoom

    • Added method center

    • Added method destroy

    • Added method is

    • Added method zoom

    • Added event missing

    • Added event zooming

    • Added class .even

    • Added class .fixed

    • Added class .hard

    • Added class .odd

    • Added class .own-size

    • Added class .sheet

    • Added the ignore attribute

    • New turn.html4.js

    • New scissors.js

    • Changed the class .turn-page to .page

    • Improved the animation frame generator with requestAnimationFrame

    • Improved the animation speed for hard pages with CSS3 transitions

    • Redesigned the event sequence to listen to only three events

    • Fixed issue #79

    • Fixed issue #91

    • Fixed issue about the event order turning + turned

    • Fixed issue about appending pages in wrong locations

    Available only on

    turn.js 3rd release

    Make a flip book with HTML5

    Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.

    What's new?

    • New addPage for creating pages dynamically.

    • New display for single and double pages.

    • Gradients for non-webkit browsers.


    CSS code:

        width: 800px;
        height: 400px;
    #magazine .turn-page{

    HTML code:

    <div id="magazine">
        <div><span class="text">Page 1</span></div>
        <div><span class="text">Page 2</span></div>
        <div><span class="text">Page 3</span></div>

    JavaScript code:

    $('#magazine').turn({gradients: true, acceleration: true});


    jQuery 1.7 or later

    Browser support

    • Chrome 12, Safari 5, Firefox 10, IE 9


    Released under a non-commercial BSD license

    Full documentation

    Show All