In questo breve articolo vi presento una libreria davvero interessantissima che consente di integrare, con facilità uno spettacolare effetto flip all’interno del nostro sito web. In sostanza, grazie a Turn.js, potremo "sfogliare" le pagine di un sito web come se fossero quelle di un libro creando l’effetto flipbook (libro sfogliabile).
Questo effetto, davvero spettacolare, si adatta perfettamente alla presentazione di libri, riviste e volantini ed è compatibile con tutte le versioni dei moderni browser (IExplorer 8+, Firefox, Safari, Chrome) nonché con i dispositivi mobili basati su iOS ed Android.
Turn.js: le basi
Per utilizzare questa libreria, per prima cosa, dobbiamo collegarci al sito web dell’autore e scaricare l’ultima release disponibile.
Una volta scaricato lo zip, decomprimiamolo e spostiamo il file turn.min.js all’interno della cartella del nostro sito.
Per utilizzare Turn.js è altresì necessario includere nelle nostre pagine web la libreria jQuery (è richiesta una versione pari o superiore alla 1.3).
Questo, quindi, il template di base della nostra pagina web:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito con effetto flip</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
</head>
<body>
</body>
</html>Markup HTML ed un pizzico di stile
Ora che il nostro template è pronto possiamo aggiungere il markup del nostro "libro":
<div id="libro">
<div class="hard">Copertina</div>
<div>Pagina n.1</div>
<div>Pagina n.2</div>
<div>Pagina n.3</div>
<div>Pagina n.4</div>
<div>Pagina n.5</div>
</div>Nel nostro markup HTML, composto da un DIV contenitore e sei DIV figli, abbiamo previsto una copertina e cinque pagine.
Aggiungiamo al nostro foglio di stile alcune semplici direttive:
#libro {
width: 600px;
height: 400px;
}
#libro .turn-page{
width: 300px;
height: 400px;
background-color: #DDDDDD;
border: 1px solid #CCCCCC;
}Si noti che il contenitore ha una larghezza doppia rispetto alla singola pagina (cui è assegnata automaticamente la classe .turn-page).
Attivare Turn.js
Per attivare l’effetto ora non resta che aggiungere questo codice nell’HEAD della pagina (dopo i richiami a jQuery ed alla libreria Turn.js):
<script type="text/javascript">
$(function(){
$('#libro').turn();
});
</script>Praticamente non abbiamo fatto altro che applicare il costruttore turn al DIV con ID "libro".
Si noti che nell’esempio non sono state definite opzioni; se avessimo voluto farlo avremmo scritto:
$('#libro').turn({
width: 600,
height: 400,
autoCenter: true
});Turn.js prevede diverse options, tra cui:
- direction
Definisce la direzione di lettura che può essere ltr (left to right) o rtl (right to left). Delautl: ltr; - display
Consente di definie se mostrare una o due pagine simultaneamente (i valori ossibili sono single e double); - duration
Definisce il tempo di transizione in millisecondi. Default: 600; - page
Definisce la pagina di partenza. Default: 1; - width
Imposta la larghezza del nostro flipbook; - height
Imposta l’altezza del nostro flipbook; - autoCenter
Centra il libro indipendentemente dalle pagine aperte;
Oltre a quelle elencate ci sono altre opzioni, proprietà, metodi ed eventi supportati. Di seguito alcuni esempi mostreranno alcune delle personalizzazioni possibili.
Muoverci tra le pagine
Turn.js prevede i metodi next e previous che consentono di muoversi tra le pagina passando, rispettivamente, alla successiva o alla precedente. Ad esempio possiamo creare due SPAN con id "avanti" e "indietro" ed attivarli in questo modo:
$('#avanti').click(function(){ $('#libro').turn('next'); });
$('#indietro').click(function(){ $('#libro').turn('previous'); });Effetto Zoom
Turn.js supporta anche un interessante metodo zoom che consente di fare lo Zoom In e Zoom Out sui contenuti della pagina. Vediamo, ad esempio, come raddoppiare le dimensioni dei contenuti del nostro flipbook:
$('#zoom').click(function(){ $('#libro').turn('zoom',2); });Se invece avessimo voluto dimezzarli avremmo usato:
$('#zoom').click(function(){ $('#libro').turn('zoom',0.5); });Aggiungere una pagina dinamcamente
Attraverso il metodo addPage è possibile aggiungere dinamicamente una pagina al flipbook. Supponiamo, ad esempio, di voler aggiungere la pagina 7 al nostro esempio:
pagina = $('<div />', { 'class': 'p7' }).html('Nuova pagina...');
$('#libro').turn('addPage', pagina);Creiamo un book fotografico!
Per finire vediamo come creare un book fotografico sfogliabile online. Nel nostro esempio, più precisamente, creeremo un book composto da 6 foto. Per farlo avremo bisogno di 6 fotografie aventi tutte le medesime dimensioni (nel mio esempio 600 x 900 pixel).
Ora carichiamo le nostre foto nella cartella "img" presente nella root del nostro sito. Creiamo adesso il file "book.html" e salviamolo nella root. Ora riempiamo il file "book.html" con il seguente contenuto:
<!DOCTYPE html>
<html>
<head>
<title>Il mio book fotografico con effetto flip</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<script type="text/javascript">
$(function() {
// attivo l'effetto
$('#foto').turn({
display: 'double',
duration: 400
});
// imposto la navigazione anche da tastiera
$(window).bind('keydown', function(e){
if (e.keyCode == 37) $('#foto').turn('previous');
else if (e.keyCode == 39) $('#foto').turn('next');
});
});
</script>
<style type="text/css">
#foto {
width: 900px;
height: 600px;
}
#foto .turn-page{
background-color: #CCCCCC;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="foto">
<!-- APPLICO LE IMMAGINI COME SFONDO DELLE PAGINE DEL FLIPBOOK -->
<div style="background-image:url(img/1.jpg);"></div>
<div style="background-image:url(img/2.jpg);"></div>
<div style="background-image:url(img/3.jpg);"></div>
<div style="background-image:url(img/4.jpg);"></div>
<div style="background-image:url(img/5.jpg);"></div>
<div style="background-image:url(img/6.jpg);"></div>
</div>
</body>
</html>Conclusione
Per una documentazione completa di Turn.js si faccia riferimento al sito ufficiale del progetto.
