Scroll Background jQuery di Blogger Template

Demo

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" di "Blogger Template"

Penerapan "Scroll Background jQuery" sangat mudah.

1. Javascript

a. Masukan script jQuery berikut sebelum </head> (jika telah memiliki script jQuery ini tidak perlu dimasukan kembali) :

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

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script> 

2. CSS

Masukan kode css background berikut ini pada body .

background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);

contoh:

body {
background:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SrFV2ZgHUvI/AAAAAAAACU8/yP_7acjnv5U/bgscroll.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
} 

3. Sip Selesai, selamat berkreasi.

Posted in: jQuery,Penerapan jQuery