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

$(function () {
	$(window).mousemove(function (e) {
		var x = e.clientX;
		var y = e.clientY;
		$("#m1")
			.css("top", y / 2)
			.css("left", x / 3);
		$("#m2").css("right", x / 5);
		$("#m3").css("bottom", y / 6);
		$("#cursor").css({ top: y, left: x, "margin-left": -($("#cursor").width() / 2) + "px", "margin-top": -($("#cursor").height() / 2) + "px" });
		//	$("#cursor").css({"top": y, "left": x});
	});
});