Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

Animation



//Mouse Doodle 2  - http://www.btinternet.com/~kurt.grigg/javascript

/*
Paste this link between the body tags of your page.

<script type="text/javascript" src="mousedoodle2.js"></script>

To edit, right click on the mousedoodle2.js file icon and choose edit.
*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Mouse Doodle 2</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
body{
background-color : #000000;
}
//-->
</style>

</head>
<body>

<script type="text/javascript">
//Mouse Doodle 2  - http://www.btinternet.com/~kurt.grigg/javascript

if ((typeof window.event&&
window.attachEvent &&
document.getElementById &&
document.firstChild && 
document.firstChild.filters){

(function(){
var colours = new Array("#ff0000","#00ff00","#ffffff","#ff00ff","#ffff00","#00aaff","#ffa500");
var n = colours.length;
var dy = 0;
var dx = 0;
var ry = 0;
var rx = 0;
var v1 = 0.08;
var v2 = 0;
var y = 0;
var x = 0;
var ref = [];
var pulseCounter = [];
var pulsePath = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,30,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1];
var pulse = [];
var d = document;
var ref2;

if (d.documentElement && 
typeof d.documentElement.clientWidth == "number" && 
d.documentElement.clientWidth != 0)
ref2 = d.documentElement;
else
 if (d.body && 
 typeof d.body.clientWidth == "number")
 ref2 = d.body;
}

var idx = document.getElementsByTagName('div').length;
var pix = "px";

document.write('<div id="con'+idx+'" style="position:absolute;top:0px;left:0px;">'
+'<div style="position:relative">');

for (i = 0; i < n; i++){
document.write('<div id="lights'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;height:50px;width:50px;font-family:Courier New;'
+'font-size:10px;color:#ffffff;padding-top:18px;text-align:center">.</div>');
}

document.write('</div></div>');

for (i = 0; i < n; i++){
ref[i= document.getElementById("lights"+(idx+i)).style;
pulseCounter[i= i * 4;
}

function mouse(){
y = window.event.clientY;
x = window.event.clientX - 16;
}
document.attachEvent("onmousemove",mouse);

function stars(){
for (i = 0; i < n; i++){
 pulseCounter[i]++;
 if (pulseCounter[i>= pulsePath.length){
  pulseCounter[i0
 }
 pulse[i= pulsePath[pulseCounter[i]];
 ref[i].filter = 'glow(color='+colours[i]+', strength='+pulse[i]+')';
 ref[i].top = ry + Math.cos((20*Math.sin(v2/20))+i*70)*100*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10+ pix; 
 ref[i].left = rx + Math.sin((20*Math.sin(v2/20))+i*70)*180*(Math.sin(10+v2/10)+0.2)*Math.cos((v2+i*25)/10+ pix; 
}
v2 += v1;
document.getElementById("con"+idx).style.top = ref2.scrollTop + pix; 
}

function delay(){
ry = dy += (y-dy0.05;
rx = dx += (x-dx0.05;
stars();
setTimeout(delay,40);
}
delay();
})();
}
</script>

</body>
</html>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation