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:

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

Via Kbyte

votar

 

Anuncios
Comments
2 Responses to “Efecto de libro animado con jQuery”
Trackbacks
Check out what others are saying...
  1. […] Actualizados : Efecto de libro animado con jQuery Presentación de diapositivas jQuery 40 diseños de logos inspirados en “peces” […]

  2. Información Bitacoras.com…

    Valora en Bitacoras.com: 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 poq…..



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

  • Mejor calificado

  • Top Clicks

    • Ninguna
A %d blogueros les gusta esto: