Comunidad de diseño web y desarrollo en internet

Efecto de pasar página de libro (Page Flip) en HTML5 con Turn.js

¿Recuerdan ese efecto que animaba una pagina de contenido como si fuera un libro cuyas paginas se cambiaban con el mouse? Sí, ese efecto que hacia que todos odiaran Flash y que era una forma de no pensar demasiado al implementar un diseño.

Turn.js es el efecto en HTML5 y Javascript. De Emmanuel Garcia (@blasten), nativo de Venezuela, viviendo en Cincinnati.

Ventajas de Turn.js por encima de Flash


Es (más o menos) cross browser, aprovechando la aceleración por hardware de Webkit, usando transformaciones y translaciones 3D de CSS3 y eventos touch. Por lo que funciona "bien" en navegadores móviles y tablets.


Además, tiene todo lo bueno de HTML. URLs "casi" profundas, texto seleccionable e indexable por Google, la flexibilidad de diseño de un sitio normal en HTML y CSS, así como interactividad interna.

Desventajas de Turn.js


En las desventajas: ESTO ERA HORRIBLE EN EL 2006 CON FLASH Y LO SIGUE SIENDO EN EL 2012 CON HTML5. Por favor no lo usen para un sitio entero. Si un cliente quiere esto como la base de todo su sitio, despidelo. El único caso donde veo esto funcionando es como un demo de cómo quedaría una versión impresa real.

El problema del Page Flip, con Flash o con Turn.js, sigue siendo que es una solución perezosa desde un punto de vista de interfaz. Una revista que llegue a la web tiene que aspirar a una interfaz tipo Flipboard, NO a una interfaz que "simule" el papel.


Esto, claro, no quita el merito técnico que tiene Turn.js. Sólo pesa 6KB y obviamente es de código abierto en Github, además de ser cross platform incluso en móviles. Vale la pena aprender del código.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate