Tutorial : Sparkling Cursor (Rainbow)

Assalamualaikum ♥

Jom buat sparkling rainbow macam ika !  Macam ni rupa dia 


Cute kan ? Warna warni gitu , ehek . Okay , benda ni tempek dekat HTML/JavaScript je . So tak susah dan payah kan kepala korang . Copy code bawah ni okay ;)

<script type='text/javascript'>
// <![CDATA[
function initCursor() {
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();
}}
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
var sparkles = 35;
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();
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");
rainbow="#"+hex[r]+hex[g]+hex[b]
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.zIndex="10";
div.style.backgroundColor=rainbow;
return (div);
}
window.onload=function()
{
initCursor()
initImage()
startTime()
}
function initImage() {
imageId = 'menu'
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function changeNav(id) {
document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
document.getElementById('rabbit').style.top="275px"
document.getElementById('penguin').style.top="532px"
}
function hidestatus(){
window.status=""
return true
}
// ]]>
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
function showRelatedContent(args) {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
document.onclick = showRelatedContent.prevOnClick;
return;
}
var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);
if (match !== null) {
document.getElementById('related-loading').style.left = match[1] + 'px';
el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';
}
el.src = "http://www.blogger.com"
+ '/related-content.g?q='
+ window.location.href
+ '&id=' + "7792698363959436653";
el.parentNode.style.display = 'block';
showRelatedContent.prevOnClick = document.onclick;
// Hide related-content dropdown when clicking anywhere but on it.
document.onclick = function() {
var el = document.getElementById('related-iframe');
if (el.parentNode.style.display != 'none') {
el.parentNode.style.display = 'none';
}
document.onclick = showRelatedContent.prevOnClick;
};
}
</script></div></div>

Paste , save and done ! :D

4 comments:

Aida Roslina said...

mcm mne klu kite nak cursor sparkling yg cursor nye bkan cursor biasa tapi cursor pilihan kite.? harap balas :)

Aida Roslina said...

@Aida Roslinasaya punye cursor gmbar reben and nk letak sparkling..mcm mne nk tukar code dye.?

Aida Roslina said...

saya punye cursor gmbar reben and just nak tambah sparkling tu je..camne nk tukar code dye.??

Ika Halim said...

@Aida Roslina just ikut tuto ni , apa apa cursor pun boleh :)

 
This blog Officially belongs to Ieqa Halim|Do not copy|Do come again dear blogger