Page Turner, Efecto libro animado basado en jQuery

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.

Demo – Descarga – via Anieto

Modo de uso:

Descargamos la libreria jquery.js
JavaScript (agregar a nuestro header)

PLAIN TEXT

JavaScript:

  1. <script type=“text/javascript” src=“jquery.js”></script>

  2.  

  3. <script type=“text/javascript”>

  4.  

  5. // set constants

  6. var $pageheight = 189; // our single page height

  7. var $pagewidth = 146; // our single page width

  8.  

  9. var $pageYpos = 0; // current Y position of our bg-image (in both pages)

  10.  

  11. $(document).ready(function(){ // When the page is ready

  12.  

  13.  

  14. /* left page turner */

  15. $(“#leftpage”).click( function() {

  16. $pageYpos = $pageYpos + $pageheight; // update Y postion

  17. $(“#leftpage”).css(“background-position”, “0px “+$pageYpos+“px”);// move the background position

  18.  

  19. setTimeout (‘$(”#flip”).css(”background-position”, “top center”);’, 200);

  20. setTimeout (‘$(”#rightpage”).css(”background-position”, “146px “+$pageYpos+”px”);’, 200);

  21.  

  22. }); // close leftpage click function

  23.  

  24. /* right page turner */

  25. $(“#rightpage”).click( function() {

  26. $pageYpos = $pageYpos – $pageheight; // note: minus page height

  27. $(“#rightpage”)

  28. .css(“background-position”, “0px “+$pageYpos+“px”);

  29.  

  30. $(“#flip”).css(“background-position”, “top left”);

  31. setTimeout (‘$(”#flip”).css(”background-position”, “top center”);’, 200);

  32. setTimeout (‘$(”#leftpage”).css(”background-position”, “146px “+$pageYpos+”px”);’, 200);

  33.  

  34. }); // close rightpage click function

  35. }); // close doc ready

  36.  

  37. </script>

PLAIN TEXT

CSS:

  1. div#turner {

  2. float:left;

  3. padding-top:11px;

  4. width:302px;

  5. height:210px;

  6. position:relative;

  7. background: transparent url(/images/frame.jpg) 0px 6px no-repeat; /* this graphic gives us the book edges and the shadows around the edges */

  8. }

  9.  

  10. #leftpage, #rightpage {

  11. float:left;

  12. position:relative;

  13. background-image:url(images/10page.jpg);

  14. overflow:hidden;

  15. width:146px;

  16. height:189px;

  17. left:5px;

  18. cursor:pointer

  19. }

  20. #leftpage{

  21. background-position:0 0;

  22. }

  23. #rightpage{

  24. background-position:146px 0

  25. }

  26. div#flip {

  27. background: transparent url(images/3d.png) top center;

  28. height:210px;

  29. width:118px;

  30. position:absolute;

  31. top:0;

  32. left:90px;

  33. z-index:99;

  34. margin-bottom:0;

  35. padding-bottom:0

  36. }

  37. #js {

  38. font-family:“Courier New”, Courier, monospace;

  39. font-size:small;

  40. padding:2em;

  41. clear:both

  42. }

  43. #js strong{

  44. color:#003399

  45. }

  46. #js em{

  47. color:#aaa

  48. }

  49. #js p.sc{

  50. color:#c00;

  51. font-weight:700;

  52. margin:0;

  53. padding:0

  54. }

  55. #js .function{

  56. color:#090;

  57. font-weight:700;

  58. }

  59. #js .css{

  60. color:#900;

  61. font-weight:700;

  62. }

PLAIN TEXT

HTML:

  1. <h2>Libro animado </h2>

  2. <div id=“turner”>

  3. <div style=“background-position: center top;” id=“flip”></div>

  4. <div style=“background-position: 146px -11151px;” id=“leftpage”></div>

  5. <div style=“background-position: 0px -11151px;” id=“rightpage”></div>

  6. </div>

~ por inotony en Octubre 30, 2007.

Escrito en WebMaster

Escribe un comentario

Tienes que iniciar sesión para escribir un comentario.