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.
CSS code:
#magazine{ width:800px; height:400px; } #magazine .turn-page{ width:400px; height:400px; background-color:#ccc; }
HTML code:
<div id='magazine'> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> </div>
JavaScript code:
$('#magazine').turn({page: 1, shadows: true, acceleration: true});
jQuery 1.7 or later
turn.js is licensed under MIT license.