Convierte página web en revista, libro ó catálogo con turn.js (flip book animation)

03-08-2012 JavaScript 3937 hits (34.46 %) 2 comentarios

Turn.js es una biblioteca JavaScript que convierte el contenido de una web en un libro, una revista ó un catálogo, con su respectiva animación tal cual pasamos de una página a otra. Actualmente cuenta con una versión para HTML5 de pago con muchos agregados interesantes y que podemos ver en turnjs.com, y también con una versión más sencilla con licencia BSD no comercial, la cual podemos acceder en GitHub.

flip book

Cómo usarlo

Referenciar en la cabecera del documento HTML, la biblioteca jquery y turn.js. Dentro de la sección body, crea una estructura de capas con la etiqueta div, dentro de cada etiqueta div coloca el contenido a mostrar como página web.

<div id="flipbook">
	<div class="hard"> Turn.js </div> 
	<div class="hard"></div>
	<div> Tu contenido html aqui 1 </div>
	<div> Tu contenido html aqui 2 </div>
	<div> Tu contenido html aqui 3 </div>
	<div> Tu contenido html aqui 4 </div>
	<div class="hard"></div>
	<div class="hard"></div>
</div>

<script type="text/javascript">
   // especificar el id del elemento html en este caso de la capa flipbook
   // se definen algunos parametros que pueden consultar en la documentacion
   $("#flipbook").turn({
   	width: 400,
   	height: 300,
   	autoCenter: true
   });
</script>

Aqui un ejemplo completo que podemos copiar y pegar, y claro lo puedes descargar de aquí ó ver el demo simple. Pero te recomendamos leer ladocumentacion para conocer la opciones, propiedades y métodos con que cuenta esta biblioteca.

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<style type="text/css">
body{
   background:#ccc;
}
#magazine{
   width:576px;
   height:752px;
}
#magazine .turn-page{
   background-color:#ccc;
   background-size:100% 100%;
}
</style>
</head>

<body>
<div id="magazine">
	<div style="background-image:url(pages/01.jpg);"></div>
	<div style="background-image:url(pages/02.jpg);"></div>
	<div style="background-image:url(pages/03.jpg);"></div>
	<div style="background-image:url(pages/04.jpg);"></div>
	<div style="background-image:url(pages/05.jpg);"></div>
	<div style="background-image:url(pages/06.jpg);"></div>
</div>

<script type="text/javascript">
$(window).ready(function() {
   $('#magazine').turn({
   	display: 'single',
   	acceleration: true,
   	gradients: !$.isTouch,
   	elevation:50,
   	when: {
   		turned: function(e, page) {
   			/*console.log('Current view: ', $(this).turn('view'));*/
   		}
   	}
   });
});
   
$(window).bind('keydown', function(e){
   if (e.keyCode==37)
   	$('#magazine').turn('previous');
   else if (e.keyCode==39)
   	$('#magazine').turn('next');
});
</script>

</body>
</html>

Enlace : https://github.com/blasten/turn.js

2 comentarios a "Convierte página web en revista, libro ó catálogo con turn.js (flip book animation)"