[EFFECT] 마우스 효과 02 : 커서 따라다니기

🖱 마우스 효과 : 마우스 커서 따라다니기 🖱

이번 시간에는 해당 영역에 커서가 닿았을 때 이벤트가 발생하는 효과에 이어서 커서를 따라다니는 요소를 구현해보겠습니다 😆

---

#1. HTML / CSS 설정하기

! HTML TIP !
페이지 섹션과 마우스 인포(커서 위치값 박스)를 각각 나누어 구조에 맞게 레이아웃을 짠 뒤 스크립트를 위한 선택자를 각각 부여합니다.
또한 텍스트에서 스타일 변경 및 이벤트를 발생시키고 싶은 곳에 각각 선택자를 선언합니다.

✏️ HTML 스크립트 보기

<header id="header">
    <h1>Javascript Mouse Effect02</h1>
    <p>마우스 이펙트 - 마우스 따라다니기(GSAP)</p>
    <ul>
      <li><a href="mouseEffect01.html">1</a></li>
      <li class="active"><a href="mouseEffect02.html">2</a></li>
      <li><a href="mouseEffect03.html">3</a></li>
      <li><a href="mouseEffect04.html">4</a></li>
      <li><a href="mouseEffect05.html">5</a></li>
      <li><a href="mouseEffect06.html">6</a></li>
      <li><a href="mouseEffect07.html">7</a></li>
    </ul>
  </header>
  <!-- //header -->

  <main id="main">
      <section id="mouseType01">
          <div class="mouse__cursor"></div>
          <div class="mouse__cursor2"></div>
          <div class="mouse__wrap">
              <p><span class="style1">Energy</span> and <span>persistence</span> conquer all things</p>
              <p><span>기운</span>과 <span>끈기</span>는 모든 것을 이겨낸다.</p>
          </div>
      </section>

  </main>
</div>

! CSS TIP !
1. 그 뒤 텍스트에서 커서가 닿았을 때 이벤트를 발생시키고 싶은 곳에 애니메이션 속성을 부여합니다.
2. 커서와 따라다니는 요소에게도 속성을 부여합니다.

✏️ CSS 스크립트 보기 : 마우스 포인터 / 커서 / 에니메이션효과

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;  /* vw를 사용하면 스크롤이 생기므로vh로 작업 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    cursor: none;
}
.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 200;
}
.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 300;
}
.mouse__wrap p span {
    padding-bottom: 3px;
    border-bottom: 0.1vw solid #e7ad00;
    color: #e7ad00;
}

@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }
    .mouse__wrap p:last-child {
        font-size: 40px;
        line-height: 1.5;
        text-align: center;
        word-break: keep-all;
    }
}

/* mouse__cursor */
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(79, 42, 225, 0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(79, 42, 225, 0.5);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}

.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(5);
    background: rgba(79, 42, 225, 0.5);
}

---

#2. JAVASCRIPT : 스크립트 짜기

이벤트 메서드인 mousemove(), mouseenter(), mouseleave() 그리고 GSAP을 통해 스크립트를 완성해보자!

💡 전체 스크립트 보기

//선택자
const cursor = document.querySelector(".mouse__cursor"); //첫번째 커서
const cursor2 = document.querySelector(".mouse__cursor2"); //2번째 커서
const span = document.querySelectorAll(".mouse__wrap span"); //오버 효과
const menu = document.querySelectorAll("#header ul li"); // 메뉴 선택
const srcBtn = document.querySelectorAll(".modal__btn"); //소스보기 버튼 선택

//마우스가 윈도우 브라우저 내에서 움직일 경우 이벤트 발생시키기 (e는 마우스 요소를 의미)
window.addEventListener("mousemove", e => {
    // 커서 좌표값 : 기본 속성이기 때문에 부드럽지 않다.
    // cursor.style.left = e.pageX -5 + "px";
    // cursor.style.top = e.pageY -5 + "px";
    // cursor2.style.left = e.pageX -15 + "px";
    // cursor2.style.top = e.pageY -15 + "px";

    // GSAP
    // 마우스 이벤트가 좀 더 부드럽고 섬세하게 작동되도록 함
    // gsap.to(선택자, {duration: 지속시간, 왼쪽 X좌표의 위치값, 위쪽 Y좌표 위치값}); : 2개의 커서의 지속시간와 위치의 차이를 통한 딜레이를 생성하여 따라오는 듯한 애니메이션을 구현한다.
    gsap.to(cursor, {duration: 0.15, left: e.pageX -5, top: e.pageY -5});
    gsap.to(cursor2, {duration: 0.5, left: e.pageX -15, top: e.pageY -15});

    //오버효과(화살표 함수 사용 : 화살표 함수에서는 this가 먹히지 않는다.)
    // 즉 this를 쓰기 위해선 옛날 문법(function)으로 짜야한다.
    //mouseenter / mouseover => 이벤트를 실행했을 때 자식요소에게 영향을 주는가의 차이로 즉 이벤트 버블링에 차이가 있다.
    span.forEach(span => {
        //마우스가 영역 안으로 들어올 때 active 붙이기
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        //마우스가 영역에서 떠났을 때
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });   
    });

    //EventTarget으로 변수를 사용하여 메뉴와 소스보기에도 효과 주기
    menu.forEach(menu => {
        menu.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        menu.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
    });
    srcBtn.forEach(srcBtn => {
        srcBtn.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        srcBtn.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
    });

    //2번째 방법 : EventTarget으로 변수를 사용하지 않고 문서에서 바로 선택하기
    // document.querySelector(".modal__btn").addEventListener("mouseenter", () => {
    //     cursor.classList.add("active");
    //     cursor2.classList.add("active");
    // });
    // document.querySelector(".modal__btn").addEventListener("mouseleave", () => {
    //     cursor.classList.remove("active");
    //     cursor2.classList.remove("active");
    // });
});

✏️ 스크립트 보기 : 자바스크립트

! JAVASCRIPT TIP !
1. 이벤트 리스너의 메서드 중 mousemove를 통해 마우스가 움직일 때 실행되는 이벤트 함수를 만듭니다.
2. 함수 안에 각각 마우스 커서2개의 움직임의 차이를 GSAP을 통해 부여합니다.
3. 그 다음 이벤트 리스너의 mouseenter()와 mouseleave() 메서드를 통하여 active가 붙었을 경우 애니메이션이 작동되도록 설정합니다.
4. 이벤트가 반복이 계속 되어야 하므로 꼭 forEach문을 먼저 작성한 뒤 이벤트 리스너를 실행시키도록 한다.

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기

스크립트를 작성하면서 조금 궁금증이 생겼습니다,, 소스보기 버튼에 애니메이션 이벤트를 구현했을 경우 선택자를 querySelector가 아닌 All로 해주어야 실행이 되더라구요...
여러개를 선택하는 것이 아닌데 All을 붙여야 한다는 점을 아무리 봐도 모르겠네요ㅠㅠ 멍챙이... 이유를 아신다면 댓글로 쓰으으윽 부탁드립니다요..
추가로 위에 궁금증 때문에 구독하신 분을 참고하러 들어갔는데 변수를 주지 않고 바로 선택자로 반복문을 만드는 방법도 있어 추가해보았습니당.. 스크립트 너무 어렵다... 🥹