|
|
|
|
![]() ![]() |
Mar 23 2006, 09:05 PM
Post
#1
|
|
|
Newbie [Level 1] ![]() Group: Members Posts: 13 Joined: 21-March 06 Member No.: 20,455 |
hai
here is a cool collection of cursor follower scripts i put together from different sites. each of them are really exciting! bet your visitors will be highly impressed and keep coming back just to play around with it 1. clock that follows your mouse that popular clock. everytime you look at it...has it ever failed to amaze? the intelligence of the programmer behind it too amazes me everytime. just cant think of how he first even conceived this as possible..not to mention of creating it. hats off to the man! this will rank as one of my all time favourites. ok here's the script: QUOTE CODE <script language="JavaScript"><!-- dCol='000000';//date colour. fCol='000000';//face colour. sCol='000000';//seconds colour. mCol='000000';//minutes colour. hCol='000000';//hours colour. ClockHeight=40; ClockWidth=40; ClockFromMouseY=0; ClockFromMouseX=100; // Alter nothing below! Alignments will be lost! d=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); m=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year; D=TodaysDate.split(''); H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); Face='1 2 3 4 5 6 7 8 9 10 11 12'; font='Arial'; size=1; speed=0.5; ns=(document.layers); ie=(document.all); Face=Face.split(' '); n=Face.length; a=size*10; ymouse=0; xmouse=0; scrll=0; props="<font face="+font+" size="+size+" color="+fCol+"><B>"; props2="<font face="+font+" size="+size+" color="+dCol+"><B>"; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0} Dy=new Array();Dx=new Array();DY=new Array();DX=new Array(); for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0} if (ns){ for (i=0; i < D.length; i++) document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>'); for (i=0; i < n; i++) document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>'); for (i=0; i < S.length; i++) document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>'); for (i=0; i < M.length; i++) document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>'); for (i=0; i < H.length; i++) document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>'); } if (ie){ document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < D.length; i++) document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>'); document.write('</div></div>'); document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>'); document.write('</div></div>'); document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < H.length; i++) document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>'); document.write('</div></div>'); document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < M.length; i++) document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>'); document.write('</div></div>') document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < S.length; i++) document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>'); document.write('</div></div>') } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX; } (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; function ClockAndAssign(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360; if (ie){ Od.style.top=window.document.body.scrollTop; Of.style.top=window.document.body.scrollTop; Oh.style.top=window.document.body.scrollTop; Om.style.top=window.document.body.scrollTop; Os.style.top=window.document.body.scrollTop; } for (i=0; i < n; i++){ var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style; F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); } for (i=0; i < H.length; i++){ var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style; HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs); } for (i=0; i < M.length; i++){ var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style; ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll; ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min); } for (i=0; i < S.length; i++){ var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style; SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll; SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec); } for (i=0; i < D.length; i++){ var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style; DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); } currStep-=step; } function Delay(){ scrll=(ns)?window.pageYOffset:0; Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed); Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed); for (i=1; i < D.length; i++){ Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed); Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed); } y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (i=1; i < n; i++) { y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } ClockAndAssign(); setTimeout('Delay()',40); } if (ns||ie)window.onload=Delay; // --></script> 2.eyes this will keep ur visitor occupied for long...guaranteed! these eyes keep moving along with your cursor and keeps staring at it...trust me...its absorbing! kind of even addictive i would say! download the eyes.zip file attached to use the script given below: QUOTE CODE <!-- ONE STEP TO INSTALL EYES: 1. Copy the coding into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the BODY of your HTML document --> <BODY> <script LANGUAGE="JavaScript1.2"> <!-- Original: demigod@psxexchange.com --> <!-- Web Site: http://www.psxexchange.com --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin var brOK = false, mie = false; if (document.layers || document.all) brOK = true; if (document.all) mie = true; var ex = 0, ey = 0; var ae, le, re, x0, y0, tid, realx, realy; function navMove(e) { ex = e.pageX; ey = e.pageY; moveeye() return routeEvent(e); } function mieMove() { ex = document.body.scrollLeft + event.x; ey = document.body.scrollTop + event.y; moveeye(); } function moveeye() { dy = ey - y0 - 20; dx1 = ex - x0 - 20; dx2 = ex - x0 - 60; r = Math.sqrt(dx1 * dx1 + dy * dy); if (r < 20) r = 20; dx1 = dx1 * 10 / r + x0 + 10; dy1 = dy * 10 / r + y0 + 10; r = Math.sqrt(dx2 * dx2 + dy * dy); if (r < 20) r = 20; dx2 = dx2 * 10 / r + x0 + 50; ae.left = x0; ae.top = y0; le.left = dx1; le.top = dy1; re.left = dx2; re.top = dy1; } function setHandlers() { if (!mie) { y0 = document.eyeballs.top; x0 = document.eyeballs.left; ae = document.eyeballs; le = document.lefteye; re = document.righteye; window.captureEvents(Event.MOUSEMOVE); window.onMouseMove = navMove; } else { y0 = document.all.eyeballs.style.pixelTop; x0 = document.all.eyeballs.style.pixelLeft; ae = document.all.eyeballs.style; le = document.all.lefteye.style; re = document.all.righteye.style; window.document.onmousemove = mieMove; } realx = x0 + 0.1; realy = y0 + 0.1; moveall(); } function moveall() { rx = realx + 40; ry = realy + 40; rx += (ex - rx) * 0.1; ry += (ey - ry) * 0.1; realx = rx - 40; realy = ry - 40; x0 = Math.round(realx); y0 = Math.round(realy); moveeye(); tid = setTimeout('moveall()', 100); } function placeeyes(x, y) { if (brOK) { ex = x + 40; ey = y + 40; s = '<DIV ID ="dummy" STYLE="position:absolute; ' + 'top:'+y+'; left:'+x+'; width:10; height:10;"> </DIV>'; s += '<DIV ID="eyeballs" STYLE="position:absolute; ' + 'top:'+y+'; left:'+x+'; width:80; height:40;"><IMG SRC=' + '"whites.gif" border=0></DIV>'; s += '<DIV ID="lefteye" STYLE="position:absolute; ' + 'top:'+(y+10)+'; left:'+(x+10)+'; width:20; height:20;">' + '<IMG SRC="pupil.gif" border=0></DIV>'; s += '<DIV ID="righteye" STYLE="position:absolute; ' + 'top:'+(y+10)+'; left:'+(x+50)+'; width:20; height:20;">' + '<IMG SRC="pupil.gif" border=0></DIV>'; document.writeln(s); } } function clearEyes() { if (tid) clearTimeout(tid); } placeeyes(200, 100); window.onload = setHandlers; window.onunload = clearEyes; // End --> </script> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 2.83 KB --> 3.elastic band trial u got to see this to believe this...seriously mind blowing! a ball on a string bounces back and forth from your cursor! very animated! you feel like playing with it non-stop! download the superball.gif attached to use the script. here's the script: QUOTE CODE //Elastic band trail //By Elastic_Ouille_script@GHindoute.net //Thanks to MP1515 <MP1515@aramette.net> for all Mathematical model //TOS for script: http://www.dynamicdrive.com/dynamicindex13/tos.txt //For this script and more, visit http://www.dynamicdrive.com var stringcolor="black" //SPECIFY STRING COLOR var ballsrc="superball.gif" //SPECIFY URL TO BALL IMAGE ///No editing required below this line////////////////////////// if (document.all&&window.print){ document.write('<IMG id=Om style="LEFT: -10px; POSITION: absolute" src="'+ballsrc+'">') ddx=0;ddy=0;PX=0;PY=0;xm=0;ym=0 OmW=Om.width/2;OmH=Om.height/2 } function Ouille(){ x=Math.round(PX+=(ddx+=((xm-PX-ddx)*3)/100)) y=Math.round(PY+=(ddy+=((ym-PY-ddy)*3-300)/100)) Om.style.left=x-OmW Om.style.top=y-OmH elastoc.to=x+","+y //elastoc.strokecolor="RGB("+x+","+(2*y)+",0)" elastoc.strokecolor=stringcolor setTimeout("Ouille()",1) } function momouse(){ xm=window.event.x+5 ym=window.event.y+document.body.scrollTop+15 elastoc.from=xm+","+ym } if(document.all&&window.print){ code="<v:line id=elastoc style='LEFT:0;POSITION:absolute;TOP:0' strokeweight='1.5pt'></v:line>"} else { code="<v:group style='LEFT:-10;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' coordsize='21600,21600'><v:line id=elastoc style='LEFT:0;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' strokeweight='1.5pt'></v:line></v:group>"} if(document.all&&window.print){ document.body.insertAdjacentHTML("afterBegin",code) document.onmousemove=momouse Ouille() } </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML> 4.mouse orbit this is fascinating! really! dots of different impressive colours orbit around your cursor like planets going around the sun.....completely fascinating. here's the script: QUOTE CODE <!-- TWO STEPS TO INSTALL MOUSE ORBIT: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER> <LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER> <LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER> <div id="starsDiv" style="position:absolute;top:0px;left:0px"> <div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div> <div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div> <div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div> <div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div> </div> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <script LANGUAGE="JavaScript"> <!-- Original: Kurt Grigg (kurt.grigg@virgin.net) --> <!-- Web Site: http://freespace.virgin.net/kurt.grigg --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin var Clrs = new Array(6); Clrs[0] = 'ff0000'; Clrs[1] = '00ff00'; Clrs[2] = '000aff'; Clrs[3] = 'ff00ff'; Clrs[4] = 'fff000'; Clrs[5] = 'fffff0'; var yBase = 200; var xBase = 200; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; var Xs = 200; var Ys = 400; if (document.layers) { window.captureEvents(Event.MOUSEMOVE); } if (document.all) { function MoveHandler() { Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt) { Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function Comet() { if (document.all) { yBase = window.document.body.offsetHeight / 4; xBase = window.document.body.offsetWidth / 4; } else if (document.layers) { yBase = window.innerHeight / 4; xBase = window.innerWidth / 4; } if (document.all) { for ( i = 0; i < starsDiv.all.length; i++ ) { step = 3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai = 0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background = Clrs[c]; } } else if (document.layers) { for ( j = 0; j < 14; j++ ) { //number of NS layers! step = 6; var templayer = "a"+j; document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor = Clrs[c]; } } currStep += step; setTimeout("Comet()", 5); } Comet(); // End --> </script> <p><center> <font face="arial, helvetica" size="-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> <!-- Script Size: 5.33 KB --> cheerz! saint |
|
|
|
Mar 23 2006, 09:54 PM
Post
#2
|
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
bet your visitors will be highly impressed and keep coming back just to play around with it Or they'll find them really annoying and not bother coming back again (that's what I'd do). |
|
|
|
Mar 24 2006, 03:27 AM
Post
#3
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 205 Joined: 14-March 06 From: Vermont or Boston (USA) Member No.: 20,077 |
Or they'll find them really annoying and not bother coming back again (that's what I'd do). Agreed. Changing the user's mouse pointer is about as bad as having your website start to automaticly play music when someone vists it. Not only is it a collosal waste of space and bandwidth, but it is also very very very obnoxious. If someone wanted a different graphic for their mouse pointer they would have downloaded one so they could use it perminately. Cheap tricks are no substitute for real content. |
|
|
|
![]() ![]() |
Similar Topics
|
Lo-Fi Version | Time is now: 7th October 2008 - 01:41 AM |