This trailing cursor javascript effect looks to be underwater with bubble images rising from the mouse cursor to the top of the screen. The underwater bubble script is more effective on webpages with a lighter background.
The underwater bubbles cursor is easy to install. Follow the simple instructions below.
STEP 1
Save the bubble image to your hard drive and upload this to your server. Place the bubble image into the same folder as your html page.STEP 2
Copy the javascript code below and paste this on the line below the <body> tag of your html document. There is nothing at all to change within the code.
<script
language="JavaScript">
n4=(document.layers);
n6=(document.getElementById&&!document.all); ie=(document.all); o6=(navigator.appName.indexOf("Opera")
!= -1)?true:false; img0=new Image(); img0.src="bluebub.gif"; num=(n6)?10:15;
y=0; x=0; if (n4||n6){ window.captureEvents(Event.MOUSEMOVE); function mouse1(e){
y = e.pageY-20-window.pageYOffset; x = e.pageX-4; } if (n4) window.onMouseMove=mouse1;
else document.onmousemove=mouse1; } if (ie||o6){ function mouse2(){ y = (ie)?event.clientY-20:event.clientY-20-window.pageYOffset;
x = event.clientX-4; } document.onmousemove=mouse2; } yp=new Array(); xp=new Array();
sp=new Array(); rt=new Array(); gr=new Array(); s1=new Array(); s2=new Array();
nz=new Array(); wh=(ie)?window.document.body.clientHeight:window.innerHeight;
for (i=0; i < num; i++){ yp[i]=Math.random()*wh-y; xp[i]=x; sp[i]= 6+Math.random()*3;
s1[i]=0; s2[i]=Math.random()*0.1+0.05; gr[i]=4; nz[i]=Math.random()*15+5; rt[i]=Math.random()*0.5+0.1;
} if (n4){ for (i=0; i < num; i++){ document.write("<LAYER NAME='bub"+i+"'
LEFT=0 TOP=-50>" +"<img src='bluebub.gif' width="+nz[i]+"
height="+nz[i]+"></LAYER>"); } } if (ie){ document.write('<div
style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < num; i++){ document.write('<img id="bub'+i+'" src="'+img0.src+'"
style="position:absolute;top:-50px;left:0px">'); } document.write('</div></div>');
} if (n6||o6){ for (i=0; i < num; i++){ document.write("<div id='bub"+i+"'
style='position:absolute;top:-50px;left:0px'>" +"<img src="+img0.src+"
width="+nz[i]+" height="+nz[i]+"></div>"); }
} function MouseBubbles(){ scy=(document.all)?document.body.scrollTop:window.pageYOffset;
scx=(document.all)?document.body.scrollLeft:window.pageXOffset; for (i=0; i <
num; i++){ sy = sp[i]*Math.sin(270*Math.PI/180); sx = sp[i]*Math.cos(s1[i]*5);
yp[i]+=sy; xp[i]+=sx; if (yp[i] < -40){ yp[i]=y; xp[i]=x; sp[i]= 6+Math.random()*3;
gr[i]=4; nz[i]=Math.random()*15+5; } if (n4){ document.layers["bub"+i].left=xp[i]+scx;
document.layers["bub"+i].top=yp[i]+scy; } if (ie){ document.getElementById("bub"+i).style.left=xp[i]+scx;
document.getElementById("bub"+i).style.top=yp[i]+scy; document.getElementById("bub"+i).style.width=gr[i];
document.getElementById("bub"+i).style.height=gr[i]; } if (n6||o6){
document.getElementById("bub"+i).style.left=xp[i]+scx; document.getElementById("bub"+i).style.top=yp[i]+scy;
} gr[i]+=rt[i]; s1[i]+=s2[i]; if (gr[i] > 14) gr[i]=15; } setTimeout('MouseBubbles()',10);
} MouseBubbles(); //--> </script>
No comments:
Post a Comment