Home » » Cara Buat Bintang Jatuh di Blog

Cara Buat Bintang Jatuh di Blog

cara buat bintang jatuh
Cara Buat Bintang Jatuh Untuk menambah kesan menarik pada suatu blog biasa nya ada berbagai macam cara di lakukan seperti gambar bergerak,menambah musik,dan juga lain2 namun kali ini saya akan membagikan cara buat "bintang jatuh" saat kita arahkan kursor pada bagian blog.



pertama tama Ialah
-Login ke blog sobat 
-lalu ke menu design / layout
-Add gadget pilih HTML/Java script
- Copy code di bawah ini 
<script type='text/javascript'> 
// <![CDATA[ 
var colour="#52D8ED"; 
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>

- kemudian Klik Save dan lihat hasil nya

( catatan code berwarna merah "#52D8ED";  adalah code warna bintang nya jadi bisa sobat ganti dengan keingian kalian)


0 comments:

Post a Comment

Powered by Blogger.