Turn js è un plugin di jQuery che consente di sfogliare i contenuti di un documento web simulando un libro o una rivista.

Turn.js supporta Zepto al posto di jQuery ed è rilasciato con licenza MIT.

Usare jQuery Turn js

Il flip book realizzato con jQuery Turn js

Usare JQuery Turn js

Scaricare e includere una copia di jQuery e di Turn.js nell’intestazione del proprio documento e poi, creare la struttura html che rappresenta il libro o la rivista come mostrato dal seguente esempio:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title>jQuery Turn.js</title>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script src="js/turn.min.js"></script>
</head>
<body>
<div id="flipbook">
 <!-- Copertina -->
 <div class="hard"></div>
 <div class="hard"></div>
 <!-- Pagine interne -->
 <div class="pages"></div>
 <div class="pages"></div>
 <div class="pages"></div>
 <!-- Copertina -->
 <div class="hard"></div>
 <div class="hard"></div>
</div>
</body>
</html>

L’elemento con classe flipbook rappresenta il libro e al suo interno troviamo la copertina, elementi con la classe hard, e le pagine interne del libro contrassegnate dalla classe pages. All’interno dei div con le classi hard e pages si può inserire qualsiasi contenuto html (h1, p, a, img, …).

Dopo aver disposto il contenuto all’interno delle pagine attivare Turn js con il seguente script, collocato in fondo al documento.

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

Lo script seleziona l’elemento .flipbook e attiva il plugin con il metodo turn che accetta anche una serie di opzioni facoltative che consentono di controllare l’aspetto e il comportamento del plugin.

Altre informazioni sulle numerose opzioni del plugin sono disponibili nel sito ufficiale.

Infine, i contenuti possono essere personalizzati con una o più regole css.

.page {
  width: 400px;
  height: 600px;
  background-color: #F8F2BC;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.pages >* {margin: 12px;}
.hard h1, .hard h2{ padding: 1em; text-align:center;}

Per altre informazioni e demo consultare la documentazione ufficiale di Turn.js

Compatibilità

Turn.js è compatibile con i seguenti browser:

  • Google Chrome 16+
  • Internet Explorer 8+
  • Mozilla Firefox 10+
  • Safari 5+

Per migliorare le prestazioni sui dispositivi mobili utilizzare Zepto.js al posto di jQuery.