Underwater Bubbles Cursor

Below you will learn how to add
Underwater Bubbles Cursors
to your existing website. We have
used an example of this script as
you can see it here on this page.

Welcome to cursor.com

Google

Underwater Bubbles Cursor by Kurt Grigg

This trailing cursor effect looks to be underwater with bubbles rising from the cursor to the top of the screen. The effect is more effective on lighter backgrounds.

STEP 1

Right click on this bubble image. Save the 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 code below and paste this on the line below the <body> tag of your html document

<script language="JavaScript"> // Under Water Mouse - Kurt Grigg - // http://www.btinternet.com/~kurt.grigg/javascript More scripts available at http://www.hypergurl.com 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>

Copyright 2004, Cursor.com, All Rights Reserved