• 0

Scroll Background jQuery

Scroll Background jQuery
Selain kita dapat merubah atau menggonta-ganti background dengan "Switch Stylesheets", kita dapat juga membuat effect scroll atau "bergerak keatas" pada "image background" dengan bantuan "Scroll Background jQuery". Tutorial ini saya contek dari web punya orang jepang yang beralamat di http://www.canarygraphics.jp. Jika anda tertarik sebelumnya lihat demo "Scroll Background jQuery" di "Blogger Template".

Penerapan "Scroll Background jQuery" sangat mudah.

  • 1. Javascript
a. Masukan script jQuery berikut sebelum kode

</head>

(jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :
Copy Codeprint?
  1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>  
b. Kemudian masukan pula Javascript "Scroll Background" berikut di bawah script jQuery tersebut.
Copy Codeprint?
  1. <script type='text/javascript'>  
  2. //<![CDATA[  
  3. $(function(){  
  4. // ***  
  5. // Scrolling background  
  6. // ***  
  7. // height of background image in pixels  
  8. var backgroundheight = 4000;  
  9. // get the current minute/hour of the day  
  10. var now = new Date();  
  11. var hour = now.getHours();  
  12. var minute = now.getMinutes();  
  13. // work out how far through the day we are as a percentage - e.g. 6pm = 75%  
  14. var hourpercent = hour / 24 * 100;  
  15. var minutepercent = minute / 30 / 24 * 100;  
  16. var percentofday = Math.round(hourpercent + minutepercent);  
  17. // calculate which pixel row to start graphic from based on how far through the day we are  
  18. var offset = backgroundheight / 100 * percentofday;  
  19. // graphic starts at approx 6am, so adjust offset by 1/4  
  20. var offset = offset - (backgroundheight / 1);  
  21. function scrollbackground() {  
  22. // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1  
  23. offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;  
  24. // apply the background position  
  25. $('body').css("background-position", "50% " + offset + "px");  
  26. // call self to continue animation  
  27. setTimeout(function() {  
  28. scrollbackground();  
  29. }, 70  
  30. );  
  31. }  
  32. // Start the animation  
  33. scrollbackground();  
  34. });  
  35. //]]>  
  36. </script>    
  • 2. CSS
Masukan kode css background berikut ini pada body
Copy Codeprint?
  1. background:url(http://2.bp.blogspot.com/-nukWrwwjHu0/ThthFnjUzHI/AAAAAAAAEaY/7v2qaFfV_c4/s1600/bgscroll.jpg);  
contoh:
Copy Codeprint?
  1. body {  
  2. background:url(http://2.bp.blogspot.com/-nukWrwwjHu0/ThthFnjUzHI/AAAAAAAAEaY/7v2qaFfV_c4/s1600/bgscroll.jpg);  
  3. margin:0;  
  4. color:$textcolor;  
  5. font:x-small Georgia Serif;  
  6. font-size/* */:/**/small;  
  7. font-size: /**/small;  
  8. text-align: center;  
  9. }  

DEMO

0 comments:

Post a Comment

Copyright © / Info Indo

Template by : Urang-kurai / powered by :blogger