Menambah Scroll Background Dengan jQuery.

Scroll Background jQuery

LIHAT DEMO

1. SIGN IN akaun blogger.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Blog Tricks

5. Cari kod ini.

</head>

6. Copy script jQuery di bawah dan letakkan di atas kod tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>

7. Tambahkan script ini, di bawah script jQuery tadi.

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

7. Cari kod CSS body.

body {
background:#000;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

8. Gantikan background dengan kod ini.

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

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

11. Pilih PREVIEW untuk melihat hasilnya.

12. Jika berpuas hati pilih SAVE TEMPLATE.

Perhatian !!! Sekiranya anda sudah mempunyai script jQuery NO 6, anda hanya perlu tambahkan script NO 7 di bawahnya.

4 comments:

Jaloee said...

uhui keren uy .. jqueri emang makyus

::melur:: said...

tak de design lain agi ke??biru ke..he3..

Anonymous said...

Luckily, there are many methods in safely removing unwanted
hair. Before you go for them, try products
at Keranique for hair care. A well groomed woman will look to her
hair and makeup first and a poll of 3,000 females across the UK revealed that about 44% feel attractive if they are having a good hair day, this compares to 16% who felt pleased with their
appearance if good teeth gave them that winning smile.


Feel free to visit my website hair products

Anonymous said...

In contrast, the non-organic gardener is more likely to use chemically created fertilizers.

5 will decrease the availability of lead from your soil. Organic
gardening teaches kids about the value of hard work and its rewards.


Look at my blog post ... coherent

Post a Comment