Turn.js: The page flip effect in HTML5

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.

Let's code

<div id="flipbook">
	<div class="hard"> Turn.js </div>
	<div class="hard"></div>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
	<div> Page 4 </div>
	<div class="hard"></div>
	<div class="hard"></div>
</div>

<script type="text/javascript">
	$("#flipbook").turn({
		width: 400,
		height: 300,
		autoCenter: true
	});
</script>

Run code

Features

✓ Works on iPad and iPhone.
✓ Simple, beautiful and powerful API.
✓ Allows to load pages dynamically through Ajax requests.
✓ Pure HTML5/CSS3 content.
✓ Two transition effects.
✓ Works in old browsers such as IE 8 with turn.html4.js

Requirements

jQuery 1.3 or above.

Browser Support

Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8

Devices

✓ All iOS (iPad, iPhone, iPod)
✓ Android (Chrome for Android)

Improvements

Turn.js 4 includes a set of significant performance improvements on its core.

✓ Effects are now quite smoother on the browser platform.
✓ The new DOM composition guarantees the same performance no matter the amount of pages.

Complements

turn.html4.js - The HTML4 version of turn.js.

zoom.js - The new zoom feature of turn.js, See a sample.

scissors.js - Cuts a page in two parts for turn.js.

hash.js - Controls the navigation history using pushState and URI hashes.

API Documentation

The turn.js API was conveniently built as an UI plugin for jQuery, it provides access to a set of features and allows you to define the user interaction.
The complete documentation is available here, it's also available in PDF format.

Options

Properties

Methods

Events

CSS Classes

Support

You can browse all issues on GitHub.
If you'd rather report issues using your email, you could contact us to: support@turnjs.com

Licensing

The turn.js project is released under the BSD license and it's available on GitHub. This license doesn't include features of the 4th release.

About

Hello Everyone,

I'm Emmanuel García, a front-end developer from Venezuela, who loves to push the web forward with new technologies.

I look forward to releasing new projects. One of those will allow you to split HTML content into pages depending on the size of the pages. While loading pages with turn.js, this library would have an infinity potential. Think about detecting the number of pages automatically, creating a table of contents that knows where every page is, and adding functions like font size.

I'm also interested in using pdf.js and node.js for a new library that will convert pdf files into pure HTML5 (text/CSS3) files to provide content for the frontend with turn.js.

Follow me on Twitter: @blasten or Github
Reach me out: blasten@gmail.com

Make a flip book with HTML5