260206 (마우스커서 커스텀)

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="cursor"></div>
<div class="cursor-shadow"></div>

<div class="body-content">
	<button class="cursor-big" onclick="alert('버튼 클릭');">버튼</button>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a enim reiciendis dolorem id aliquid ab eaque accusamus ducimus iusto! Mollitia aliquam quibusdam <span class="cursor-big">distinctio</span> animi incidunt est voluptatibus magni vel!
	<button class="cursor-big" onclick="alert('버튼 클릭');">버튼</button>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a enim reiciendis dolorem id aliquid ab eaque accusamus ducimus iusto! Mollitia aliquam quibusdam <span class="cursor-big">distinctio</span> animi incidunt est voluptatibus magni vel!
	<button class="cursor-big" onclick="alert('버튼 클릭');">버튼</button>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a enim reiciendis dolorem id aliquid ab eaque accusamus ducimus iusto! Mollitia aliquam quibusdam <span class="cursor-big">distinctio</span> animi incidunt est voluptatibus magni vel!
	<button class="cursor-big" onclick="alert('버튼 클릭');">버튼</button>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a enim reiciendis dolorem id aliquid ab eaque accusamus ducimus iusto! Mollitia aliquam quibusdam <span class="cursor-big">distinctio</span> animi incidunt est voluptatibus magni vel!
	<button class="cursor-big" onclick="alert('버튼 클릭');">버튼</button>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi a enim reiciendis dolorem id aliquid ab eaque accusamus ducimus iusto! Mollitia aliquam quibusdam <span class="cursor-big">distinctio</span> animi incidunt est voluptatibus magni vel!
</div>

body {
	margin: 0;
}

* {
	cursor: none; /* 	기본커서 숨기기 */
}

.body-content {
	background-color: white;
}

.cursor {
	position: fixed;
	width: 10px;
	height: 10px;
	top: -300px;
	left: -300px;
	border-radius: 50%;
	background-color: white;
	pointer-events: none; /* 	호버나 터치했을 때 이벤트에 연관되지 않음 */
	translate: translate(-50%, -50%); /* 	마우스 커서 기준점 조정 */
	z-index: 1000;
	mix-blend-mode: difference;
}

.cursor-shadow {
	position: fixed;
	width: 20px;
	height: 20px;
	top: -300px;
	left: -300px;
	border-radius: 50%;
	background-color: violet;
	pointer-events: none; /* 	호버나 터치했을 때 이벤트에 연관되지 않음 */
	translate: translate(-50%, -50%); /* 	마우스 커서 기준점 조정 */
	transition: width .1s, height .1s, top .1s, left .1s;
	z-index: 999;
	mix-blend-mode: difference;
}

.need-to-cursor-big .cursor-shadow {
	width: 50px;
	height: 50px;
}

.cursor-big {
	font-weight: bold;
	cursor: pointer;
}

console.clear();

const $cursor = $('.cursor');
const $cursorShadow = $('.cursor-shadow');

$(window).mousemove(function(e) { // 화면내에서 마우스가 움직일 때 마다
	console.log("e.clientX : " + e.clientX);
	console.log("e.clientY : " + e.clientY); // 마우스가 움직이는 X축Y축 좌표
	
	
	
	$cursor.css({
		top: e.clientY,
		left: e.clientX	// 마우스 따라오게 하기
	});
	$cursorShadow.css({
		top: e.clientY,
		left: e.clientX	// 마우스 따라오게 하기
	});
});

$('.cursor-big').mouseenter(function(){
	$('html').addClass('need-to-cursor-big');
});

$('.cursor-big').mouseleave(function(){
	$('html').removeClass('need-to-cursor-big');
});