Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Turn.js: ottenere un effetto page flip d'impatto

Un plugin che trasforma le pagine web in riviste, con la possibilità di sfogliarle
Un plugin che trasforma le pagine web in riviste, con la possibilità di sfogliarle
Link copiato negli appunti

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{
	;
	;
}

ed aggiungiamo un'altra regola CSS per definire dimensioni ed aspetto grafico delle singole pagine:

#magazine
.turn-page{
	;
	;
	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


Ti consigliamo anche