BookBlock: Contenido web en forma de revista, folleto ó catálogo

BookBlock es un plugin para jQuery que puedes usar para crear contenido web en forma de folletos ó revista, con un efecto de voltear página ó “page flip”. Cualquier contenido puede estar dentro del bloque que se convertirá en una página, tales como imágenes ó texto. El plugin transforma el bloque o estructura sólo cuando sea necesario (a pasar de página).

Codrops explica el uso de este plugin en un tutorial paso a paso y utiliza adicionalmente otro plugin jQuery++ que contiene algunos complementos para jQuery.

Uso Básico 

<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>

Llamar al plugin:

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

Opciones de BookBlock

// speed for the flip transition in ms. speed : 1000, // easing for the flip transition. easing : 'ease-in-out', // if set to true, both the flipping page and the sides will have an overlay to simulate shadows shadows : true, // opacity value for the "shadow" on both sides (when the flipping page is over it). // value : 0.1 - 1 shadowSides : 0.2, // opacity value for the "shadow" on the flipping page (while it is flipping). // value : 0.1 - 1 shadowFlip : 0.1, // perspective value perspective : 1300, // if we should show the first item after reaching the end. circular : false, // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'. nextEl : '', // if we want to specify a selector that triggers the prev() function. prevEl : '', // callback after the flip transition. // page is the current item's index. // isLimit is true if the current page is the last one (or the first one). onEndFlip : function( page, isLimit ) { return false; }, // callback before the flip transition. // page is the current item's index. onBeforeFlip: function( page ) { return false; }

Enlaces | Demo, Código fuente