Turn.js: Plugin para JQuery de efecto tirón con HTML5

Muchos conocemos el famoso efecto de revistas interactivas que se presentan desde hace tiempo en la web realizadas con Flash que nos permitían arrastrar una hoja para hacer el cambio y ver las paginas siguientes, un efecto bastante llamativo que todos queríamos usar en alguna ocasión.

Ahora que existe HTML5 con todas estas nuevas tecnologías, quizás este  efecto sea adoptado.

Turn.js es un plugin de JQuery que nos permite realizar el efecto Page-Flip (Tirón de páginas) totalmente con HTML5 y Javascript sin necesidad de algún elemento adicional, tal y como pasaba en Flash. Este famoso efecto está bastante pulido y en el caso del sitio web del mismo plugin, se puede ver que trabaja muy bien.

Lo que más nos sorprende es que esta bastante optimizado:

• Utiliza la aceleración de hardware
• Funciona en tablets y SmartPhones
• Fácil de manipular
• Peso ligero de tan sólo 6KB

¿Cómo se usa?

Para usarlo, basta con solo agregar este simple código, donde cada página es un elemento div con contenido al gusto.

#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}

<div id='magazine'>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
</div>

$('#magazine').turn();

Si quieres más información o probar el efecto por ti mismo, el sitio web de Turn.js hace uso del plugin y está bastante completo