Animation: mouse doodle
//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[i] = 0;
}
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-dy) * 0.05;
rx = dx += (x-dx) * 0.05;
stars();
setTimeout(delay,40);
}
delay();
})();
}
</script>
</body>
</html>
Related examples in the same category
