You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26 lines
695 B
JavaScript
26 lines
695 B
JavaScript
const target = document.getElementById("xy-target");
|
|
const pad = document.getElementById("xy-pad");
|
|
|
|
let rect = pad.getBoundingClientRect();
|
|
let width = pad.clientWidth;
|
|
let height = pad.clientHeight;
|
|
|
|
let control = false;
|
|
|
|
pad.addEventListener("mouseenter", () => {
|
|
control = true;
|
|
});
|
|
|
|
pad.addEventListener("mouseleave", () => {
|
|
control = false;
|
|
});
|
|
|
|
pad.addEventListener("mousemove", (e) => {
|
|
if (control) {
|
|
var x = e.clientX - rect.left; //x position within the element.
|
|
var y = e.clientY - rect.top; //y position within the element.
|
|
target.style.backgroundColor = `hsl(${(x / width) * 360}deg, 100%, 75% )`;
|
|
target.style.transform = `scale(${100 + (y / height) * 100}%)`;
|
|
}
|
|
});
|