Posted by admin in 
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>
