SummArg | Cursos y recursos para webmasters

18/12/2010

Flipbook o páginas que voltean con jQuery

Flipbook es el efecto que consiste en simular una página de un libro que voltea. La mayoría de los flipbooks que pueden encontrar en la web están hechos en Flash, como los de Activeden que pueden encontrar aquí.

En esta oportunidad les mostramos un plugin para el framework jQuery llamado booklet que logra el mismo efecto sólo con JavaScript. Su uso es muy sencillo, necesita del plugin easing adicionalmente para funcionar, y posee una cuantiosa variedad de opciones para configurarlo.

Código de ejemplo

Para comenzar a utilizar booklet en nuestro website, primero debemos descargar el plugin easing y los archivos de booklet. jQuery será cargado directamente desde Google. Entre etiquetas <head> y cuidando las rutas de nuestros scripts colocaremos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />

Entre etiquetas <body> colocamos nuestro contenido dentro del siguiente marcado:

<div id="mybook">
	<div>
		<div>
			<h3>Yay, Pagina 1!</h3>
		</div>
		<div>
			<h3>Yay, Pagina 2!</h3>
		</div>
		<div>
			<h3>Yay, Pagina 3!</h3>
		</div>
		<div>
			<h3>Yay, Pagina 4!</h3>
		</div>
	</div>
</div>

Finalmente inicializamos booklet colocando el siguiente código antes del cierre de </body>:

<script type="text/javascript">
$(function() {
	//single book
	$('#mybook').booklet();
	//multiple books with ID's
	$('#mybook1, #mybook2').booklet();
	//multiple books with a class
	$('.mycustombooks').booklet();
});
</script>

Dejar un comentario

  1. Jorge Beltrán

    Buen dia.
    Descargue los codigos, copie y pegue el codigo tal cual… pero no funcionó.

    Estoy que me saco un ojo con esto jajajaja.

    Bloquet

    Yay, Pagina 1!

    Yay, Pagina 2!

    Yay, Pagina 3!

    Yay, Pagina 4!

    $(function() {
    //single book
    $(‘#mybook’).booklet();

    //multiple books with ID’s
    $(‘#mybook1, #mybook2’).booklet();

    //multiple books with a class
    $(‘.mycustombooks’).booklet();
    });

  2. Jorge Beltrán

    <!–

    Bloquet

    Yay, Pagina 1!

    Yay, Pagina 2!

    Yay, Pagina 3!

    Yay, Pagina 4!

    $(function() {
    //single book
    $(‘#mybook’).booklet();

    //multiple books with ID’s
    $(‘#mybook1, #mybook2’).booklet();

    //multiple books with a class
    $(‘.mycustombooks’).booklet();
    });

    –>

  3. Nekko

    En que URL estás aplicando este código? Verlo en vivo es mas útil para detectar errores. Saludos!

  4. francisco

    Yo ya pude hacer q se vea decente pero no me jala el flip el texto de Yay, Pagina #! me sale solo en la primer pagina es decir me sale el
    Yay, Pagina 1!
    Yay, Pagina 2!
    Yay, Pagina 3!
    Yay, Pagina 4!

    todo en la primer pagina y como si no existieran mas paginas

Dejar un comentario