Make a flip book with HTML5

  • Works on most browsers and devices
  • Simple and clean API
  • Lightweight, 10K

Download

↑ Click a book or magazine to see turn.js in action

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>

Features

Requirements

jQuery 1.3 or above.

Browser Support

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

Devices

Improvements

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

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.

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