[Tutorial] Uso jQuery Plugin TurnJS, a crear revistas virtuales!
Hola, acabo de ver un excelente plugin llamado turn.js, que nos permite crear el clásico movimiento de transición de “dar vuelta la hoja” que vimos tantas veces con Flash en algunas publicaciones Online. La URL del website de esta maravilla es
y quería compartir un pequeño tutorial de como usarlo, nos podemos entusiasmar con crear una revista 
Dentro de las características con la que cuenta este plugin tenemos:
Usar Aceleración por Hardware Funciona en Tablets y smartphones Muy fácil de manipular Liviano, solo pesa 6K Ve este video para ver el resultado final de este tutorial.
Uso de TurnJS
Voy a utilizar, como siempre, la herramienta favorita y recomendada para trabajar con HTML5 :WebMatrix, veamos la estructura del demo:
Veamos el código de demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#magazine{
width:1200px;
height:700px;
}
#magazine .turn-page{
width:600px;
height:700px;
background-color:#ccc;
}
.portada{
background-image: url("img/fondoPortada.png");
}
.contraPortada {
background-image: url("img/fondoContraPortada.png");
}
#titulo{
font-size: 34px;
margin: 180px 0px;
text-shadow: 2px 1px 1px white;
color:#4477b9;
font-family: Verdana;
text-align:center;
}
.interior{
background:top left url(img/textura.jpg);
}
.texto {
font-size: 24px;
margin: 30px 0px;
font-family: Verdana;
color:black;
}
</style>
</head>
<body>
<div id='magazine'>
<div class="portada">
<div id="titulo">Demo turn.js by @chalalo</div>
</div>
<div class="interior" >
<div class="texto">
Este es un texto de la pagina 2
</div>
</div>
<div class="interior">
<div id="foto">
<h1> Se busca:</h1>
<img src="img/yo2.png" alt="yo">
</div>
</div>
<div class="contraPortada">
<div id="titulo">
Fin de la Revisa :P
</div>
</div>
</div>
</body>
</html>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="js/turn.js"></script>
<script>
$(document).ready(function(){
$('#magazine').turn();
});
</script>
Por simplicidad del demo escribí los css en la misma página. Podemos ver en los estilos que tenemos portada, contraportada (que es la tapa de atrás de nuestra revista), vamos a agregar un fondo ( no soy diseñador, lo hice con el powerpoint), pero bueno, no se ve tan mal), y luego una textura de fondo para las páginas interiores.
Puedes notar que los divs que entran dentro de “magazine” corresponden a las páginas propiamente tal, dentro de cada uno de estos divs, vas a colocar tu contenido, en mi caso solo definí 4 paginas, 1: portada, 2: pagina interior, 3: pagina interior 4: tapa posterior
Luego debemos agregar la librería jQuery y finalmente, al div principal, que es el que contiene los “div páginas”, se aplicamos el plugin.
Como referencia rápida:
Constructor:
$(‘selector’).turn([opciones]);
Parámetros:
-
width:tipo numérico, por defecto es el ancho del objeto seleccionado como contenedor de paginas.
-
height:tipo numérico, por defecto es el alto del objeto seleccionado como contenedor de paginas.
-
page: tipo numérico, página por defecto, (1)
-
duration:tipo numérico, por defecto 600
-
acceleration:tipo boolean, por defecto está en true
Puedes ver una completa guía de propiedades acá:
https://github.com/blasten/turn.js/wiki/Reference
Espero que te sirva
@chalalo
PD: A mi no me funcionó el turn.min.js que está disponible para descarga, obtuve la librería que ocupa el WebSite del plugin y funcionó sin problemas.