Crear el efecto de un libro con Javascript
Escrito por J.F. el Sábado, 28 de Julio del 2007 a las 14:55
Vía Infected-FX me topo con un interesante ejemplo realizado mediante Javascript con el uso de la librería Jquery. Jquery es una librería Javascript que simplemente has de incluir como cualquier script que se encuentra en una hoja aparte para comenzar a utilizarla. El efecto es muy curioso y la verdad que resulta bastante vistoso, así que si deseas implementar éste sistema, aquí tienes el ejemplo del libro funcionando y su código. En la demo que puedes ver en el anterior enlace el libro que aparece es demasiado pequeño pero si te fijas en los comentarios parece que puedes poner el tamaño que desees a tu gusto. Copio y pego el código tal cual de la página:
-
<script type="text/javascript" src="jquery.js"></script>
-
-
<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>
Categoria: Curiosidades, Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Comentario de Aasipoie
Realizado el Viernes, 22 de Agosto del 2008 a las 23:59
Prevetik vsem kto ne spit
Ja tuta nakladu a vi uberite pliz
Comentario de JAJA
Realizado el Sábado, 13 de Septiembre del 2008 a las 4:44
JAJA, UPYACHKA! UG NE PROIDET, BLYA!
