Cara Membuat Efek Bintang Sprinkle Pada Kursor | Selsmst datang

Senin, 25 November 2013

Cara Membuat Efek Bintang Sprinkle Pada Kursor

Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di
blog lain dengan efek bintang yang bertaburan (sprinkle) dan
berwarna-warni bukan ? Memang efek bintang
bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat,
namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog
akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo
memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.

Cara membuat efek bintang bertaburan pada kursor
cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :

1.
Login ke dashboard blogger sobat.

2.
Pilih Rancangan > Elemen Halaman > Add
Gadget (HTML/JavaScript).

3.
Copy dan paste script dibawah ini pada gadget
baru tadi.

<script><br /> // JavaScript Document<script type=text/javascript><br /> // <![CDATA[<br /> var colour="red";<br /> var sparkles=65;<br /> <br /> var x=ox=400;<br /> var y=oy=300;<br /> var swide=800;<br /> var shigh=600;<br /> var sleft=sdown=0;<br /> var tiny=new Array();<br /> var star=new Array();<br /> var starv=new Array();<br /> var starx=new Array();<br /> var stary=new Array();<br /> var tinyx=new Array();<br /> var tinyy=new Array();<br /> var tinyv=new Array();<br /> window.onload=function() { if (document.getElementById) {<br /> var i, rats, rlef, rdow;<br /> for (var i=0; i<sparkles; i++) {<br /> var rats=createDiv(3, 3);<br /> rats.style.visibility="hidden";<br /> document.body.appendChild(tiny[i]=rats);<br /> starv[i]=0;<br /> tinyv[i]=0;<br /> var rats=createDiv(5, 5);<br /> rats.style.backgroundColor="transparent";<br /> rats.style.visibility="hidden";<br /> var rlef=createDiv(1, 5);<br /> var rdow=createDiv(5, 1);<br /> rats.appendChild(rlef);<br /> rats.appendChild(rdow);<br /> rlef.style.top="2px";<br /> rlef.style.left="0px";<br /> rdow.style.top="0px";<br /> rdow.style.left="2px";<br /> document.body.appendChild(star[i]=rats);<br /> }<br /> set_width();<br /> sparkle();<br /> }}<br /> function sparkle() {<br /> var c;<br /> if (x!=ox || y!=oy) {<br /> ox=x;<br /> oy=y;<br /> for (c=0; c<sparkles; c++) if (!starv[c]) {<br /> star[c].style.left=(starx[c]=x)+"px";<br /> star[c].style.top=(stary[c]=y)+"px";<br /> star[c].style.clip="rect(0px, 5px, 5px, 0px)";<br /> star[c].style.visibility="visible";<br /> starv[c]=50;<br /> break;<br /> }<br /> }<br /> for (c=0; c<sparkles; c++) {<br /> if (starv[c]) update_star(c);<br /> if (tinyv[c]) update_tiny(c);<br /> }<br /> setTimeout("sparkle()", 40);<br /> }<br /> function update_star(i) {<br /> if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";<br /> if (starv[i]) {<br /> stary[i]+=1+Math.random()*3;<br /> if (stary[i]<shigh+sdown) {<br /> star[i].style.top=stary[i]+"px";<br /> starx[i]+=(i%5-2)/5;<br /> star[i].style.left=starx[i]+"px";<br /> }<br /> else {<br /> star[i].style.visibility="hidden";<br /> starv[i]=0;<br /> return;<br /> }<br /> }<br /> else {<br /> tinyv[i]=50;<br /> tiny[i].style.top=(tinyy[i]=stary[i])+"px";<br /> tiny[i].style.left=(tinyx[i]=starx[i])+"px";<br /> tiny[i].style.width="2px";<br /> tiny[i].style.height="2px";<br /> star[i].style.visibility="hidden";<br /> tiny[i].style.visibility="visible"<br /> }<br /> }<br /> function update_tiny(i) {<br /> if (--tinyv[i]==25) {<br /> tiny[i].style.width="1px";<br /> tiny[i].style.height="1px";<br /> }<br /> if (tinyv[i]) {<br /> tinyy[i]+=1+Math.random()*3;<br /> if (tinyy[i]<shigh+sdown) {<br /> tiny[i].style.top=tinyy[i]+"px";<br /> tinyx[i]+=(i%5-2)/5;<br /> tiny[i].style.left=tinyx[i]+"px";<br /> }<br /> else {<br /> tiny[i].style.visibility="hidden";<br /> tinyv[i]=0;<br /> return;<br /> }<br /> }<br /> else tiny[i].style.visibility="hidden";<br /> }<br /> document.onmousemove=mouse;<br /> function mouse(e) {<br /> set_scroll();<br /> y=(e)?e.pageY:event.y+sdown;<br /> x=(e)?e.pageX:event.x+sleft;<br /> }<br /> function set_scroll() {<br /> if (typeof(self.pageYOffset)=="number") {<br /> sdown=self.pageYOffset;<br /> sleft=self.pageXOffset;<br /> }<br /> else if (document.body.scrollTop || document.body.scrollLeft) {<br /> sdown=document.body.scrollTop;<br /> sleft=document.body.scrollLeft;<br /> }<br /> else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {<br /> sleft=document.documentElement.scrollLeft;<br /> sdown=document.documentElement.scrollTop;<br /> }<br /> else {<br /> sdown=0;<br /> sleft=0;<br /> }<br /> }<br /> window.onresize=set_width;<br /> function set_width() {<br /> if (typeof(self.innerWidth)=="number") {<br /> swide=self.innerWidth;<br /> shigh=self.innerHeight;<br /> }<br /> else if (document.documentElement && document.documentElement.clientWidth) {<br /> swide=document.documentElement.clientWidth;<br /> shigh=document.documentElement.clientHeight;<br /> }<br /> else if (document.body.clientWidth) {<br /> swide=document.body.clientWidth;<br /> shigh=document.body.clientHeight;<br /> }<br /> }<br /> function createDiv(height, width) {<br /> var div=document.createElement("div");<br /> div.style.position="absolute";<br /> div.style.height=height+"px";<br /> div.style.width=width+"px";<br /> div.style.overflow="hidden";<br /> div.style.backgroundColor=colour;<br /> return (div);<br /> }<br /> // ]]><br /> </script><br />

4.
Simpan dan lihat hasilnya.

NB : Silahkan ganti warna “red”
dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.

Efek bintang bertaburan pada kursor ini akan terlihat
jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja
yang sabar ya. Selamat mencoba sobat.

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)