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

6
12118

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 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

6 COMENTARIOS

  1. Digamos que yo quiero usar base de datos para colocar precios e imagenes de productos, crees que este catalogo me pueda servir ? Muchas gracias por la informacion.

  2. hola disculpa pero soy muy nuevo en esto de programar, como puedo agregar imágenes y videos, todo el código que pones esta muy padre, pero si quiero saber en que programas me funciona y si los tengo que descargar o los puedo usar desde la wed y discúlpame se que suena muy tonto pero si necesito saber, mejor pregunto antes de regarla no crees , espero tu respuesta gracias.

  3. Saludos

    Es posible exportar este flipbook a un ejecutable y que mantenga la animación?, O solo sirve para Web?

    Gracias

Comments are closed.