100-project-100-days-website/100_projects/70-javascript-zoom-effect/script.js
2023-05-02 19:37:11 +03:00
Ask

15 lines
496 B
JavaScript

{489d71df70e3233b91e874658c5198853be5d408 true 496 script.js 0xc0030bbb20}

const container = document.getElementById("container");
const img = document.querySelector("img");
container.addEventListener("mousemove", (e) => {
const x = e.clientX - e.target.offsetLeft;
const y = e.clientY - e.target.offsetTop;
console.log(x, y);
img.style.transformOrigin = `${x}px ${y}px`;
img.style.transform = "scale(2)";
});
container.addEventListener("mouseleave", () => {
img.style.transformOrigin = "center center";
img.style.transform = "scale(1)";
});