turn.js
is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.
- + Uses Hardware acceleration
- + Works on tablets and smartphones
- + Easy to manipulate
- + Lightweight, only 6K
The awesome paper-like effect made for HTML5
is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.
Here's an example:
#magazine{ width:800px; height:400px; } #magazine .turn-page{ width:400px; height:400px; background-color:#ccc; }
<div id='magazine'> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> </div>
$('#magazine').turn();
That's it!
$ git clone git://github.com/blasten/turn.js.git
turn.js is released under a noncommercial BSD license
Is turn.js useful for you?
Making a donation will help to improve turn.js.
$('selector').turn([options]);
Parameters:
$('selector').turn(property | method [, parameters]);
I'm Emmanuel Garcia.
I'm native from Venezuela and currently living in Cincinnati, but I'm planning to move to Silicon Valley or New York. I've been a front end developer since years ago when I started working in my Bachelor's in CS.
I also have eight years of experience developing scalable software in PHP.
These are some of the things I love to work with: jQuery, node.js, express.js, socket.io, Coffee Script.
I decided to develop turn.js, because it was neccesary as a part of an app for magazines. I spent a while working in the math for this effect. Being inspired by the effect of iBooks and Maps for iOS, I created two objects: one for manipulating the overall publication and another for each individual page. The last one is completely independent, in that it offers an API for creating its own implementations.
Any bug, comment or suggestion about turn.js, just click the feedback button.