js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<section class="cursor-sec">
	<div id="m1"><img src="https://github.com/qwerewqwerew/book01/blob/main/assets/img/1.png?raw=true" /></div>
	<div id="m2"><img src="https://github.com/qwerewqwerew/book01/blob/main/assets/img/2.png?raw=true" /></div>
	<div id="m3"><img src="https://github.com/qwerewqwerew/book01/blob/main/assets/img/3.png?raw=true" /></div>
	<div id="cursor"></div>
</section>

CSS

section {
	cursor: none;
	cursor: default;
	width: 100%;
	height: 150vh;
}

#m1 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 30px;
}
#m2 {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 300px;
	right: 30px;
}
#m3 {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 80px;
	left: 150px;
}
#cursor {
	width: 100px;
	height: 100px;
	position: absolute;
	user-select: none;
	pointer-events: none;
	z-index: 9999;
	background-color: rgba(255, 165, 0, 0.4);
	border-color: orange;
	border-radius: 50%;
}

JavaScript

const cursor = document.querySelector("#cursor");
const cStyle = window.getComputedStyle(cursor);

console.log(cStyle[34], cStyle.width);
//문자열을 일정한 구분자로 잘라서 배열로 저장 배열의 길이
//string.split(separator, limit)
console.log(cStyle.width.split("px", "1"));
addEventListener("mousemove", function (e) {
	let cSize = [cStyle.width.split("px", 1), cStyle.height.split("px", 1)];
	let x = e.clientX;
	let y = e.clientY;
	const m1 = document.querySelector("#m1");
	m1.style.top = y / 2 + "px";
	m1.style.left = x / 3 + "px";
	const m2 = document.querySelector("#m2");
	m2.style.right = x / 5 + "px";
	const m3 = document.querySelector("#m3");
	m3.style.bottom = y / 6 + "px";
	cursor.style.top = y + "px";
	cursor.style.left = `${x}px`;
	cursor.style.marginLeft = -(cSize[0] / 2) + "px";
	cursor.style.marginTop = -(cSize[1] / 2) + "px";
});