sparkling cursor tutorial
<script type="text/javascript"> // <![CDATA[ var colour="#000000"; var sparkles=120;
/**************************** code by goghpetals.tumblr.com ****************************/ 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="2px"; Â Â rlef.style.left="0px"; Â Â rdow.style.top="0px"; Â Â rdow.style.left="2px"; Â Â 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>
all you need to do is paste the code above in your theme.Â
paste the code before </head> tag.Â
finally, save it.
for any questions message me! (if you want a specific color cursor also let me know!)
