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.
Incluye además varios complementos (Complements):
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?
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?