In questo articolo proviamo turn.js. Si tratta di un plugin per jQuery che permette di navigare tra le pagine di un sito come se fossero quelle di una rivista. Effetti di transizione come questi si adattano bene a contenuti come libri o brochure online.
Vediamo come realizzare un esempio simile a questo (provate a sfogliare le pagine):
Dopo aver scaricato il plugin dal repository di GitHub, occorre preparare la pagina HTML per includere le librerie necessarie:
<html>
<head>
<title>Pagina di test di Turn.js</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
</head>
<body>
</body>
</html>Come è evidente dal codice, l'unica dipendenza di turn.js è da jQuery, in particolare a partire dalla versione 1.7 della libreria.
Per definire il contenuto sfogliabile è sufficiente definire un div come contenitore globale e una serie di altri div interni che rappresentano le pagine, come
mostrato di seguito:
<div id="magazine">
<div>Pagina 1 </div>
<div>Pagina 2 </div>
<div>Pagina 3 </div>
</div>Definiamo quindi le dimensioni totali del nostro documento quando entrambe le pagine sono aperte con la seguente regola CSS:
#magazine{
width:800px;
height:400px;
}ed aggiungiamo un'altra regola CSS per definire dimensioni ed aspetto grafico delle singole pagine:
#magazine
.turn-page{
width:400px;
height:400px;
background-color:#ccc;
border:1px solid #999;
}La classe turn-page è predefinita in turn.js e viene automaticamente applicata alle pagine del nostro documento.
A questo punto non ci resta che inizializzare il tutto da codice JavaScript:
$().ready(function() {
$('#magazine').turn();
});Con questi semplici passaggi abbiamo messo su documento sfogliabile di sicuro impatto grafico.
Sfogliare le pagine da codice
Il plugin prevede la possibilità di gestire il documento e la navigazione tra le pagine direttamente da codice. Così, ad esempio, possiamo creare un documento con effetto sfogliabile posizionandoci direttamente sulla terza pagina con la seguente istruzione di inizializzazione:
$('#magazine').turn({page:3});oppure possiamo ottenere l'indice della pagina corrente:
alert($('#magazine').turn('page'));o andare alla pagina successiva o precedente:
$('#magazine').turn('next');
$('#magazine').turn('previous');Abbiamo a disposizione anche quattro eventi che ci consentono di personalizzare l'effetto:
| Evento | Descrizione (quando si verifica) |
|---|---|
turning |
prima che inizi l'effetto di voltare la pagina |
turned |
dopo che la pagina è stata voltata |
start |
prima che venga visualizzato l'effetto della pagina sfogliata |
end |
dopo che l'effetto della pagina sfogliata scompare |
Gestendo opportunamente questi eventi è possibile ottenere effetti altamente realistici.
Il plugin è pienamente compatibile anche per la visualizzazione su dispositivi mobili ed è in grado di sfruttare l'accelerazione hardware,anche se può avere qualche piccolo problema su alcune schede grafiche.
Link Utili
- Sito ufficiale di Turn.js
