Conocimientos Web .es

Como 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 libro a tus imágenes. El efecto no requiere Flash ni Java, requisito que sí necesitan otros elementos similares.

Requiere agregar los siguientes códigos (en la entrada extendida) y los siguientes archivos: Descarga de los archivos

Agregar al Head

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>

Agregar a la hoja de estilos (o al Head entre etiquetas <style> y </style>):

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. }

Al body, donde deberá ir la imagen

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>

En breves días probaré el script, para confirmaros que funciona.

Saludos vacacionales desde Trujillo.

Comparte este artículo