движение фигур при движении мыши

by George Bash

HTML

<div class="mouse_move">
  <img id="img1" src="https://edublink.html.devsblink.com/assets/images/faq/shape-12.png" class="mouse" value="3">
  <h2>GeeksforGeeks</h2>
  <img id="img2" src="https://edublink.html.devsblink.com/assets/images/faq/shape-09.png" class="mouse" value="5">
  <img id="img3" src="https://edublink.html.devsblink.com/assets/images/cta/shape-04.png" class="mouse" value="4">
</div>

CSS

* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: sans-serif;
		}

		body {
			background-color: rgb(102, 189, 16);
		}

		.mouse_move {
			position: relative;
			width: 100%;
			height: 100vh;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.mouse_move h2 {
			position: relative;
			font-size: 32px;
			color: white;
		}

		.mouse_move img {
			position: absolute;
		}

		#img1 {
			top: 80px;
			left: 80px;
		}

		#img2 {
			bottom: 80px;
			right: 80px;
		}

		#img3 {
			top: 80px;
			right: 140px;
		}

JavaScript

document.addEventListener("mousemove", parallax);
function parallax(event) {
  this.querySelectorAll(".mouse").forEach((shift) => {
    const position = shift.getAttribute("value");
    const x = (window.innerWidth - event.pageX * position) / 90;
    const y = (window.innerHeight - event.pageY * position) / 90;

    shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
  });
}