Tupale

Efecto de PageFlip en CSS3 y HML5

Muchos de los clientes que manejo piden como requerimiento el muestro de catálogos o diferentes publicaciones con el efecto pageflip, cosa que hasta hace poco era casi exclusiva de flash pero en la era HTML5 era de esperar que alguna herramienta nos permitiera lograr un resultado similar sin tener que recurrir a scripts en flash que no son muy amigables con el navegador ni con los motores de búsqueda.

Y después de buscar un rato en la red encontré esta librería que nos permite un efecto muy bueno con HTML5, CSS3 y un poco de javascript para dar un resultado mas que aceptable. Se trata de BookBlock, que como verán en el demo nos permite emular el efecto del pageflip o giro de pagina de un libro o revista de manera muy amigable y sobretodo versátil ya que en esta versión podremos usar nuestro código html y css sin tener que recurrir a Adobe Flash.

Page Flip sin flash

Page Flip sin flash

Pueden ver el demo de BookBlock aquí.

Para su implementacion el código resulta muy fácil si ya has trabajado con scripts de sliders o carruseles ya que se basa en lo mismo, un contenedor general HTML con objetos, un classeado por CSS y un llamado a javascript para definir el bloque HTML por su identificador.

Código HTML:

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- custom content -->
    </div>
    <div class="bb-item">

    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

Llamada Javascript:

$(function() {            
    $( '#bb-bookblock' ).bookblock();
});

El código CSS lo tendrán que modificar del archivo “css/style.css” aunque no siempre es necesario.

Pueden descargarlo directamente de la pagina del proyecto en GitHub.
https://github.com/codrops/BookBlock

Deja un comentario

A %d blogueros les gusta esto: