Saturday, January 7, 2012

Tutorial Cursor (Sparkle)

apa itu sparkle cursor?
lihat cursor bui ada benda2 jatuh kan..
itulah sparkle cursor..jom belajar..

mula2 pergi ke
DASHBOARD > DESIGN > ADD GADGET > HTML/JAVA SCRIPT

copy kod dibawah dan paste dekat ruang kosong html tadi
<script type="text/javascript">
                </script>
     <script type="text/javascript">
            // <![CDATA[
            var colour="#0000ff";
            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>
#0000ff tu adalah warna benda2 jatuh tu..macam bui punya adalah warna biru
anda boleh ubah warna tu ikut selera masing2

save dan lihatlah hasilnya..*_*