Efecto de libro animado con jQuery

Viewbook es un plugin jQuery que crea de forma dinámica la transición y muestra de contenidos con el efecto de un libro en el que pasamos de hoja a hoja. Todo esto con apenas unas lineas de código y sin complicarnos ni un poquito la vida.

Intento de captura del efecto en acción:

efecto libro jquery

Si lo desean, pueden ver en la web oficial una serie de ejemplos con distintos modos de implementar este fantástico plugin.

La instalación es realmente simple, por un lado vamos a escribir el código con la información que va a contener cada hoja, por ejemplo:

<div id="mybook">
<div class="vb-load">
	<div>
		<h3>Yay, Page 1!</h3>
	</div>
	<div>
		<h3>Yay, Page 2!</h3>
	</div>
	<div>
		<h3>Yay, Page 3!</h3>
	</div>
	<div>
		<h3>Yay, Page 4!</h3>
	</div>
	</div>
</div>

El plugin nos pide que encerremos todas las divs correspondientes a cada hoja dentro de una con el nombre de clase vp-load. Ahora solo queda inicializar el plugin pasando por parámetro el nombre de la div con las hojas:

$(function() {
	//single book
	$('#mybook').viewbook();
});

Y listo, con apenas unas lineas de código vamos a tener funcionando la animación sin ningún problema.

Les recomiendo que miren las distintas opciones del plugin, por ejemplo tenemos la opción de seleccionar una hoja en particular para que se muestre al iniciar, o bien la velocidad de desplazamiento de cada pagina, etc.

Web plugin: Viewbook

Categorizado en: