Change Colour on Mouse Move
Friday 15th May, 2009
This is a little background colour changing script I put together a while back using scraps of other scripts available else where online.
It can be extremely overwhelming if used in large areas, but sublte use can add a nice effect.
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos in other browsers
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
// limit size of variables (divide by two) & round to whole number
posX = (tempX / 2).toFixed(0);
posY = (tempY / 2).toFixed(0);
posZ = (Math.sqrt(posX) * Math.sqrt(posY)).toFixed(0); // get hypotenues for 3rd variable
// modify each variable for desired color range area - change these equations to fine tune the colour changing effect
posY = (posY / 2).toFixed(0);
posZ = (posZ / 4).toFixed(0);
// limit range to actual RGB values
if (posX < 0) { posX = 0;}
if (posY < 0) { posY = 0;}
if (posZ < 0) { posZ = 0;}
if (posX > 255) { posX = 255;}
if (posY > 255) { posY = 255;}
if (posZ > 255) { posZ = 255;}
// convert RGB values to HEX values - functions not written by me!
function RGBtoHex(posX,posY,posZ)
{return toHex(posX)+toHex(posY)+toHex(posZ)}
function toHex(N) {
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
}
// Change the background colour of the element with the ID 'bg'
document.getElementById("bg").style.background = '#' + RGBtoHex(posX,posY,posZ);
return true;
}
Simply add this script to your site and include a Div element with the id 'bg' and you're away!
Comments
Please login to comment on this page