Ir al contenido principal

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

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?

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes