Turn.js – Make a flip book with HTML5

Turn.js - Make a flip book with HTML5

Turn.js Works on most browsers and devices, Simple and clean API, and Lightweight(10K).

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

  • 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

Demo Download – Noncommercial BSD license