Efecto de libro animado con jQuery

Pablo

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

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios

  1. Onizukar Responder

    Muy buen plugin
    que bueno que tenga licencia MIT

  2. Francisco Responder

    Muy chevere este plugin, es bastante creativo

  3. Santi Responder

    Muy buena referencia, si señor :)

  4. Luis Responder

    Muy bueno este post…gracias Pablo!…bueno…vamos a probarlo…:-D

Realizar un comentario