[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'); mouseEffect.addEventListener('mousemove',(e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; });

---