Make a flip book with HTML5
Created by
Friday, April 28, 2017

Turn.js è una libreria JavaScript che renderà il vostro progettocome un vero e proprio libro o una rivista con tutti i vantaggi di HTML5. Il web è sempre più bello, con nuove interfacce utente basate in HTML5; turn.js è la misura migliore per una rivista, libro o un catalogo con base HTML5.

DEMO - DOWNLOAD

Il CODICE

 

<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 5Chrome 16Firefox 10IE 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.

This article has
0 points
Give points
1 2 3 4 5

I like

You like

Report

You have reported
Reasons
Cancel
0 comments