Cómo crear de forma sencilla un elegante flip book en HTML5

votar
Turn.js es una ligera y sencilla biblioteca JavaScript de código abierto, que te permite lucir tu contenido como si se tratase de un libro o revista real, simulando el pasar de las hojas. El resultado es asombroso. Fue creado por Emmanuel García de Venezuela.


Para ello solamente hace uso de las características de HTML5 para hacer la web algo más hermoso. Es una de las mejores opciones para crear un catálogo, libro o revista de forma totalmente gratuita.

¿Y qué tiene de especial esto? Pues es una buena forma de reciclar nuestro contenido y también de crear apps a partir de él. Ten en cuenta que las apps son tendencia en el SEO este año.

Estas son algunas de sus características

Turn.js está actualmente en su versión 4 e incluye mejoras significativas como son un efect más suave y una nueva composición del DOM que garantiza el mismo rendimiento sin importar el número de páginas.

  • Funciona en prácticamente casi todos navegadores; Safari, Chrome, Firefox e IE.
  • Y en dispositivos móviles; iOS (iPad, iPhone, iPod) y Android (Chrome para Android)
  • Práctica API simple, clara y muy potente.
  • Permite cargar las páginas dinámicamente a través de solicitudes Ajax
  • Funciones de zoom, pantalla completa, etc.
  • Muy poco peso; solo 10K
  • Puro contenido HTML5/CSS3
  • Dos impresionantes efectos diferentes de transición.

Incluye además varios complementos (Complements):
  • turn.html4.js: La versión HTML4 de turn.js.
  • zoom.js: Una característica de zoom. Demo.
  • scissors.js: Corta una página en dos parte para turn.js.
  • hash.js: Controla el historial de navegación usando pushState y URI hashes.

Completa API y su documentación

La API de turn.js está construida como un plugin de jQuery UI para que, proporcionando un acceso a un conjunto de características, permitirnos definir la interacción con el usuario.

Tienes toda la información en la página del desarrollador, o incuso en este archivo con formato PDF.

Cómo hacer un flip book HTML5 con Turn.js

Este es todo el código (además de la llamada para cargar jQuery desde la cabecera):

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> El contenido de la página 1 </div>
<div> 
El contenido de la página 2 </div>
<div> El contenido de la página 3 </div>
<div> El contenido de la página 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
 
<script type="text/javascript">
$("#flipbook").turn({
width: 400, // ancho
height: 300, // alto
autoCenter: true
});
</script>

Más sencillo imposible. Dentro de cada elemento div va cada página. El valor hard del atributo class realiza un "efecto de transición duro", pero se puede cambiar esta y otras muchas más opciones. Después .turn() se encarga de todo.


Requiere jQuery 1.3 o superior. Puedes ver varios ejemplos desde la estantería en la página del desarrollador: turn.js ¿No es buenísimo?

2 comentarios:

  1. Una pregunta, como hago para que funcione en chrome, no funciona en chrome solo en Firefox.
    Me podría ayudar ?

    ResponderEliminar
    Respuestas
    1. Sí que funciona en Chrome yo lo probé personalmente y si entras al sitio con Chrome y ves la demo es porque funciona.

      Debe ser algún problema con tu navegador, las extensiones, etc.

      Un saludo.

      Eliminar

Tu comentario tiene valor, dedícale unos minutos y repásalo. Si tiene faltas de gramaticales o de ortografía lo borraré. Respondo a todos así que si tienes dudas no repares en preguntar.

Si esperas respuesta acuérdate de marcar el botón de 'Avisarme'.

Y RECUERDA: Para mantener las conversaciones legibles usa correctamente el botón COMENTAR o RESPONDER cuando proceda. Muchas gracias.

Más de 2000 suscriptores reciben las entradas en su correo

Vía FeedBurner. Introduce tu dirección de correo electrónico y confirma el mensaje que te llegue.