Create a flip book with HTML5 and Turn.js

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.

The API includes properties, methods and events. Most setter and getter functions have the same name.

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

turn-js

Example 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>

</div>

$("#flipbook").turn({

width: 400,

height: 300,

autoCenter: true

});

</script>

Requirements.

jQuery 1.3 or above

Browser Support
Safari for iOS (iPad, iPhone, iPod)
Safari 5
Chrome 11
Chrome for Android
Firefox 9
IE 9
IE 8 Using turn.html4.js

Reference URl

Download Demo

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Create a flip book with HTML5 and Turn.js

Recommended Posts:

webmentor