Swirling Cursor Effect Javascript

Below you will learn how to add
Swirling Cursor Effect Javascripts
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

Swirling Cursor Effect Javascript

Another very good cursor javascript that swirls dots around the mouse cursor. Easy to install and a brilliant piece of scripting. Get the code for your swirling cursor effect now.

STEP 1

Copy the red bullet image to your hard drive.
Upload this to your web server and place it into the same folder as your html page.

STEP 2

Copy the event handler code onLoad="startthedots()" below and paste this straight into the <body> tag of your html document.

<body onload="startthedots()">

STEP 3

Copy the code below and paste this below the <body> tag of your html document. Nothing at all to alter within the script.

<script language="JavaScript"> Distributed by http://www.hypergurl.com --> window.onerror=null; netscape = (document.layers) ? 1:0; goodIE = (document.all) ? 1:0; document.onmousemove=MoveHandler; var gotthere = 0; var count = 0; var ietopcorner='' var ieleftcorner='' toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 ); temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 ); leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 ); templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 ); difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 ); diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 ); questtop = -13; questleft2 = -96; if (netscape) { document.body=new Object() document.body.scrollTop='' document.body.scrollLeft='' window.captureEvents(Event.MOUSEMOVE); window.onMouseMove = MoveHandler; var layerstart = "document."; var layerleft = ".left"; var layertop = ".top"; var layerstyle = ""; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; } else if (goodIE) { ietopcorner=document.body.scrollTop ieleftcorner=document.body.scrollLeft layerstart = "document.all."; layerleft = ".left"; layertop = ".top"; layerstyle = ".style"; windowWidth=600; windowHeight=400; } // end error trapping var Ypos2 = 72; var Xpos2 = 72; function MoveHandler(e) { if (netscape || goodIE) { Xpos2 = (netscape)?e.pageX:event.x Ypos2 = (netscape)?e.pageY:event.y Xorigin = Xpos2; Yorigin = Ypos2; if (Ypos2 > windowHeight/2) { if (Xpos2 > windowWidth/2) { direction = 1;} else { direction = -1;} } else { if (Xpos2 > windowWidth/2) { direction = -1;} else { direction = 1;} } }} function startthedots() { if (goodIE) { windowWidth=document.body.clientWidth; windowHeight=document.body.clientHeight; } Xorigin = 204; Yorigin = 147; spin();run(); } var OrbitSize = 200; count=1; delay=100; direction = -1; Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 ); Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 ); Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 ); var speed = -0.06; var offset = 1; function spin() { for ( j = 0 ; j <= 9 ; j++ ) { Count[j] = Count[j] + (speed*direction); Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset)); Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); } setTimeout('spin()',3); } function run() { count++; for ( j = 0 ; j <= 9 ; j++ ) { difftop[j] = Ypoint[j] - temptoplocation[j]; diffleft[j] = Xpoint[j] - templeftlocation[j]; diff = 30; temptoplocation[j] = temptoplocation[j] + difftop[j]/diff; templeftlocation[j] = templeftlocation[j] + diffleft[j]/diff; eval(layerstart+"a"+j+layerstyle+layerleft+" = document.body.scrollLeft+templeftlocation["+j+"]"); eval(layerstart+"a"+j+layerstyle+layertop+" = document.body.scrollTop+temptoplocation["+j+"]"); } setTimeout('run()', 25) } badIE = 0; browserName = navigator.appName.substring(0,8); browserVer = parseFloat(navigator.appVersion); macintosh = navigator.userAgent.indexOf("Mac"); if (browserName == "Microsof") { if (macintosh != -1) { badIE = 1; } if (browserVer < 4) { badIE = 1; } } </script> <style type="text/css"> #a0 {position:absolute; left:-24; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a1 {position:absolute; left:96; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a2 {position:absolute; left:216; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a3 {position:absolute; left:338; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a4 {position:absolute; left:460; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a5 {position:absolute; left:640; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a6 {position:absolute; left:-24; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a7 {position:absolute; left:200; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a8 {position:absolute; left:300; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} #a9 {position:absolute; left:600; top:-24; width:9; height:25;clip:rect(0 9 9 0);z-index:2000;} // --> </style> <div id="a0" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a1" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a2" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a3" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a4" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a5" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a6" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a7" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a8" align="center"><img src="images/swirl.gif" height="9" width="9" /></div> <div id="a9" align="center"><img src="images/swirl.gif" height="9" width="9" /></div>

The swirling cursor effect may be a bit slow to load on pages with other javascripts, but is well worth the little wait.