<!-- Code that change background colour with mouse movement -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Changing Color with Mouse Motion</title>
<style>
body{
background-color: blueviolet;
}
</style>
</head>
<body onload="">
<h1>Changing colors</h1>
<script>
(function() {
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 1); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
}
else {
// 0,0 -> 1040,840
// Use pos.x and pos.y
let bg = document.getElementsByTagName("body")[0];
percen_x = (pos.x*255)/1040
percen_y = (pos.y*255)/840
//console.log(pos.x,percen_x,pos.y,percen_y)
r = percen_x
g = percen_y
b = 255
bg.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}
}
})();
</script>
</body>
</html>
<!-- Credits : Rajanit Navapara,
https://stackoverflow.com/users/157247/t-j-crowder,
https://stackoverflow.com/users/2519416/martijn,
-->