Facebook Twitter

Cara Membuat Bintang Jatuh Dari Cursor

Categories : Blogger, Tips and Tricks
Cara memasang/Membuat efek Bintang Jatuh Dari kursor. Sebenarnya tips blogger yang satu ini boleh dibilang sudah jadul yaitu efek bintang jatuh dari kursor pada saat mouse atau kursor digerakkan.Mungkin sobat blogger sudah banyak yang tahu tips tricks blogger cara membuat bintang jatuh dari cursor ini. Tapi untuk me-refresh saya akan mengulasnya kembali disini, tips yang satu ini sangatlah cocok buat sobat yang gemar menghias blognya agar tampil indah dan menarik.

Bintang JatuhCara membuat efek bintang jatuh ini sangat gampang dan simple,sobat tidak perlu ribet-ribet mengedit html template sobat. jadi sobat hanya perlu menambahkan scriptnya pada add gadget. Dan untuk memilih warna bintang yang akan ditampilkan biar sesuai dengan warna background blognya mungkin sobat perlu mencoba colorpic - software untuk mengambil kode warna di screen desktop. jadi warna bintang yang akan diberikan efek sesuai dengan keinginan sobat.



  • Silahkan sobat login di Blogger
  • Pilih design
  • Pilih add gadget
  • Pilih html/javascript
  • Masukkan kode script dibawah 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>

Carilah kode yang berwarna biru dan gantilah dengan kode warna yang sesuai dengan keinginan sobat.
Simpan dan lihat hasilnya, semoga berhasil.



Sobat sedang membaca artikel tentang Cara Membuat Bintang Jatuh Dari Cursor dan sobat bisa menemukan artikel Cara Membuat Bintang Jatuh Dari Cursor ini dengan url http://mangde182.blogspot.com/2011/08/membuat-efek-bintang-jatuh.html,silahkan di bookmark jika artikel Cara Membuat Bintang Jatuh Dari Cursor ini sangat bermanfaat bagi sobat,atau klik tombol share diatas untuk membagikan link Cara Membuat Bintang Jatuh Dari Cursor kepada teman sobat.

0 comments: — Skip to Comment

Post a Comment — or Back to Content

 
Back To Top Blogger