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

Getting Started

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

License

turn.js is released under a noncommercial BSD license

Support development

Is turn.js useful for you?
Making a donation will help to improve turn.js.

Donate now

Hello Everyone,

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.

turn.js

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.

Contact

blasten@gmail.com or @blasten

Any bug, comment or suggestion about turn.js, just click the feedback button.