[jQuery]hover시 마우스 커서 커스텀하기

 

 

안녕하세요 무택입니다 :)

오늘은 마우스 커서를 커스텀할 수 있는 코드에 대해 써보려고 합니다.

최근에는 다양한 hover들이 많이 등장해서 이 기능도 자주 접해보신 분들이 많을 것 같은데, 아래에서 자세한 내용을 알아보시죠😉

 

 

HTML/CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />   <!--폰트 어썸-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>   <!--제이쿼리-->


<style>
    * { padding: 0; margin: 0; } 
    figure { width: 300px; cursor: pointer; } 
    figure img { width: 100%; transition: all .3s ease; } 
    #cursor_div { position: fixed; left: 0; top: 0; pointer-events: none; } 
    #cursor_div .inner_wrap { backdrop-filter: blur(40px); width: 150px; height: 150px; border-radius: 50px; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%); transition: opacity .3s ease; opacity: 0; } 
    #cursor_div .inner_wrap.on { opacity: 1; } 
    #cursor_div .inner { text-align: center; } 
    #cursor_div .inner i { color: #fff; font-size: 22px; margin-bottom: 10px; } 
    #cursor_div .inner p { color: #fff; font-size: 20px; }
</style>


<figure class="img_figure">
  <img src="https://images.unsplash.com/photo-1694980549496-8aff1f4d16c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1888&q=80">
</figure>
<div id="cursor_div">
  <div class="inner_wrap">
    <div class="inner">
      <i class="fa-solid fa-arrow-right"></i>
      <p>자세히 보기</p>
    </div>
  </div>
</div>

 

 

jQuery

document.addEventListener("mousemove", (e) => {
  // 마우스 커서의 좌표를 가져옵니다.
  const x = e.clientX;
  const y = e.clientY;

  // cursor_div를 커서 좌표로 이동
  $("#cursor_div").css('transform', 'translate(' + x + 'px, ' + y + 'px)');

  // 원하는 영역에 올라오면 클래스 추가 및 제거
  $('.img_figure').eq(0).on('mouseover', function () {
    $('.inner_wrap').eq(0).addClass('on');
  });
  $('.img_figure').eq(0).on('mouseleave', function () {
    $('.inner_wrap').eq(0).removeClass('on');
  });
});

 

 

codepen

See the Pen Untitled by TytanLee (@TytanLee) on CodePen.

 

기본 원리

1. 커서의 커스텀 영역을 미리 만들어 놓은 후, 안 보이는 상태로 항상 커서를 따라다니게 한다.

2. 원하는 영역에 들어오면 보이게 한다.

HTML 구조

- ①마우스 따라다닐 영역 (위 예시에서는 `#cursor_div`)

 - ②크기 등 보여질 영역 = `.inner_wrap`

  - ③텍스트 or 아이콘 = `.inner`

>> 구분하는 이유

위 기능을 구현하기 위해서는 `translate`옵션을 두 번 사용해야 합니다. 하지만 위 두 영역을 하나로 통일하면 두 번 사용할 수 없어 영역을 두 개로 나눴습니다.

따라서 ①번은 커서의 위치를 따라다닐 `translate` 옵션 적용, ②번은 보여질 영역을 마우스 커서 가운데에 맞추기 위한 `translate` 옵션 적용

주의할 점

원하는 영역에 들어왔을 때 hover를 활성화하기 위해서는 커서가 원하는 영역에 들어온 걸 잡아내야 합니다. 하지만 코드

에서는 ①번이 보이지만 않을 뿐 항상 따라다니고 있기 때문에 커서는 ①번에 항상 올라가 있는 상태입니다.

이걸 해결하기 위해 `pointer-events`옵션을 `none`으로 해서 ①번이 커서에 잡히지 않도록 해줘야 합니다.