Page Turner es un bello script que trabajando con jQuery nos permite lograr un efecto realmente muy bonito, como si se tratase de un libro animado. Lograremos exactamente lo mismo que haríamos con PageFlip, pero lo bueno de Page Turner, es que no necesitaremos utilizar nada de flash.
Básicamente el efecto que produciremos utilizando Page Turner, es mediante la superposición de imágenes, donde crearemos una imagen con los artículos de nuestro libro, y otra que será la encargada de generar el efecto de transición entre página y pagina.
Modo de uso:
Descargamos la libreria jquery.js
JavaScript (agregar a nuestro header)
<script type="text/javascript">
// set constants
var $pageheight = 189; // our single page height
var $pagewidth = 146; // our single page width
var $pageYpos = 0; // current Y position of our bg-image (in both pages)
$(document).ready(function(){ // When the page is ready
/* left page turner */
$("#leftpage").click( function() {
$pageYpos = $pageYpos + $pageheight; // update Y postion
$("#leftpage").css("background-position", "0px "+$pageYpos+"px");// move the background position
setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);
}); // close leftpage click function
/* right page turner */
$("#rightpage").click( function() {
$pageYpos = $pageYpos - $pageheight; // note: minus page height
$("#rightpage")
.css("background-position", "0px "+$pageYpos+"px");
$("#flip").css("background-position", "top left");
setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);
}); // close rightpage click function
}); // close doc ready
</script>
float:left;
padding-top:11px;
width:302px;
height:210px;
position:relative;
background: transparent url(/images/frame.jpg) 0px 6px no-repeat; /* this graphic gives us the book edges and the shadows around the edges */
}
#leftpage, #rightpage {
float:left;
position:relative;
background-image:url(images/10page.jpg);
overflow:hidden;
width:146px;
height:189px;
left:5px;
cursor:pointer
}
#leftpage{
background-position:0 0;
}
#rightpage{
background-position:146px 0
}
div#flip {
background: transparent url(images/3d.png) top center;
height:210px;
width:118px;
position:absolute;
top:0;
left:90px;
z-index:99;
margin-bottom:0;
padding-bottom:0
}
#js {
font-family:"Courier New", Courier, monospace;
font-size:small;
padding:2em;
clear:both
}
#js strong{
color:#003399
}
#js em{
color:#aaa
}
#js p.sc{
color:#c00;
font-weight:700;
margin:0;
padding:0
}
#js .function{
color:#090;
font-weight:700;
}
#js .css{
color:#900;
font-weight:700;
}
<div id="turner">
<div style="background-position: center top;" id="flip"></div>
<div style="background-position: 146px -11151px;" id="leftpage"></div>
<div style="background-position: 0px -11151px;" id="rightpage"></div>
</div>
Loading ...
Chicoblog
15-08-2007
Permalink
Jejeje, buen Script, lo use hace un tiempito y es realmente bueno
Saludos!
eme
15-08-2007
Permalink
gracias por el codigo pero donde consigo el PageFlip, obviamente libre.
Me gusta mucho lo que posteas en tu página cada dia me sorprendo mas cn cada cosa que pones.
Saludos
Nikko
15-08-2007
Permalink
creo que tengo el PageFlip en algun cd, debo buscarlo y te digo saludos
PageTurner, efecto libro sin usar Flash
15-08-2007
Permalink
[...] de costumbre y gracias a esa maravilla 2.0 llamada Google Reader he descubierto en Xyberneticos (excelente blog que os recomiendo de veras) un script que permite agregar fácilmente un efecto de [...]
Oscar
15-08-2007
Permalink
Hey.... no puedo bajarme el jquery.js... donde lo puedo conseguir. no se que paso con el enlace.
saludos
Juli
15-08-2007
Permalink
Hola! he intentado varias veces pero no he podido hacer el efecto, creo que lo he hecho mal. Me pueden ayudar? gracias. julianaproducer[arroba]gmail.com