- Back to Home »
- blogger , post , tutorial »
- tutorial : efek salji kat kursor :)
Posted by : Unknown
Tuesday, December 14, 2010
huuu...arini ade request tutorial drpd budak skolah aku, Farah Anum. dia bru start blogging ^^ dia tnye camne nk buat efek cam salji kt kursor mouse bila org baca blog kita. ala, mcm yg aku da buat kt blog aku ni. yg warna brown tu ^^ nah anum, anas ajarkan ni :)
step by step :-
1. login blog ---> dashboard ---> Add a gadget ---> HTML/javascript
2. then copy code kat bawah nih,
<script type='text/javascript'>3.Save then preview blog anda ^^
// <![CDATA[
var colour="brown";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
p/s : klu x jadi btau ek? slamat mencuba Farah Anum ^^
panjangnya code ^_^
ReplyDeleteweehie!! best3!! teruskan dgn mencipta nama sebagai pro-blogger :)
ReplyDeletesaye ader try bt tp x kelua pon salji nye????
ReplyDeletePut3...huhu...thnx...support me k ? T_T
ReplyDeleteThis comment has been removed by the author.
ReplyDeletechill laa anas....!!!
ReplyDeleteupdated!!! try la...da update dah tutorial ni...klu ade prob lg btau la ^^
ReplyDeletetenkiu.dah apply.^_^.menjadi!
ReplyDeleteu r welkem ^^
ReplyDeleteanas2. law nuya buat. xkn nk salji sme cm anas tu? law yg len nk wt cmne?
ReplyDeletenuya nak kaler pe??
ReplyDeletekale terang2. ta ksah lah. cmne anas cri?
ReplyDeleteklu nk kaler terang amik la biru or merah...btw, klu nk tukar, nuya tekan ctrl + f then tukar code "brown" kepada "red" utk merah, n "blue' utk biru ^^
ReplyDeletewah sudah jadi cikgu la sekarang
ReplyDeletehahaha...cikgu part time :P
ReplyDeletesaye deki tngokk blog awakk. haha. baguss2
ReplyDelete@imie mustapha nak kene pelempang ea? HAHAHA
ReplyDeletehaha. kasor teh. akoe katok ann. haha. malam nie ajor nde rumit tuh. haha. payoh base.
ReplyDelete@imie mustapha
ReplyDeletehahaha...tgk r dlu...klu free aq ajor ah :P
sy suke men2 cursor yg cmni..heheeeee
ReplyDelete*tp mls wat la..hahakk
hahaha...buat je la :P
ReplyDeleteheeeeee......
ReplyDeletehuhu.. aptot la sejuk je.. kat sni
ReplyDelete@mira_nas
ReplyDeletehuu~~ try la :P