turn.js: A jQuery Page Flip Effect For HTML5
Turn.js is a jQuery plugin that’s inspired by the effect found in iBooks and Maps for iOS, which simulates the act of flipping through a book’s pages. As described by creator Emmanuel Garcia, this effect will go well with sites about books, magazines, or any reading material. Click on the image below for the demo.
You may download a copy of the light version here or the full version here.
Below are snippets of the plugin:
CSS
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}
|
HTML
<div id='magazine'>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
</div>
|
jQuery
$('#magazine').turn();
|
That’s it! The plugin requires jQuery 1.7 or later and only weighs in at 15K. It also works on tablets and smartphones.
0
513
