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.
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
Muchas gracias por la informacion!!!
Y cual es el codigo para que en el diseño salgan ambas pagina y no solo una?
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.
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.
Saludos. Hay forma de exportar este flipbook a un archivo ejecutable y que mantenga la animación.? o es solo uso web?.
Gracias
Saludos
Es posible exportar este flipbook a un ejecutable y que mantenga la animación?, O solo sirve para Web?
Gracias