27/2/14

Efecto flip book en HTML5 y Javascript

¿Quien no recuerda las revistas hechas en flash con ese efecto en las hojas que hacían parecer que se leía un libro de verdad?

Ahora gracias a la herramienta Turn.js escrita en JavaScript y que hace uso de la libreria JQuery es posible dar ese efecto de papel a revistas que queramos publicar ya sea en páginas web o dispositivos móviles algo que flash no tiene.
<div id="flipbook">
 <div class="hard"> Turn.js </div>
 <div class="hard"></div>
 <div> Page 1 </div>
 <div> Page 2 </div>
 <div> Page 3 </div>
 <div> Page 4 </div>
 <div class="hard"></div>
 <div class="hard"></div>
</div>
<script type="text/javascript">
 $("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
 });
</script>

Soporta navegadores

  • Safari 5
  • Chrome 16
  • Firefox 10
  • IE 10,9,8

Dispositivos

  • Todos los iOS (iPad, iPhone, iPod)
  • Android

Licencia

  • Turn.js esta bajo licencia BSD


Hay quienes no les gusta este efecto en flash, habrá otros que si, en fin para gustos se puede encontrar de todo en la web, y si no te gusta ninguno que esperar a crear el tuyo y compartirlo ;)

Enlace: TURN.JS

No hay comentarios:

Publicar un comentario