[JS] JavaScript 마우스 커서 모양 바꾸기

📝 마우스 커서 모양 바꾸기

커서 모양을 바꾸는 원리는 간단합니다. html에 비어있는 태그를 만들어준 후에
css로 사용할 커서 모양을 커스텀 해준 후에 script로 마우스를 따라다니게 하는 원리입니다.

아래 태그를 살펴보겠습니다.

< HTML >

• html에 커서로 사용할 빈 태그를 만들어 줍니다.

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

< CSS >

• css로 커서로 사용할 모양을 커스텀 해줍니다.
• position: absolute 로 만들어진 div 태그를 띄워줍니다.
• body에 cursor: none 으로 기존 커서를 없애줍니다.

body{
	cursor: none;
}
.cursor{
	width: 20px; height: 20px; 
	background-color: #000; 
	border-radius: 10px; 
	position: absolute; left: 0; top: 0; 
	z-index: 999; 
	transition: background-color .2s, border-color .2s, border-radius .2s, 		transform .6s
}

< JS >

• script의 mousemove 이벤트를 사용합니다.
• client x,y 값을 이용해 마우즈 좌표를 구한 후에 position값 left, top 값에 넣어줍니다.
• client x,y : 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시합니다.
• 스크롤바가 움직이더라도 값은 동일합니다.

const cursor = document.querySelector('.cursor'); 

cursor.addEventListener('mousemove',(e) => { 
  cursor.style.left = `${e.clientX}px`; 
  cursor.style.top = `${e.clientY}px`; 
});