마우스 이펙트_02 : 내 마우스 좌표값을 추적하는 포인터를 GSAP를 통해 구현해보기!

마우스 이펙트_02

저번 "마우스 이펙트_01"예제에서는 단순히 마우스 포인터를 마우스가 위치한 좌표값에 따라 붙여주는 예제였다면,
이번 "마우스 이펙트_02"예제에서는 마우스 포인터를 마우스가 위치한 좌표값에 따라 자연스럽고 알잘딱하게 따라가주는 이펙트를 구현해보도록 하겠습니다 ^----^v
알잘딱한 마우스 포인터 추적 이펙트를 구현하기 위해서는 GSAP 라이브러리를 이용하는것이 효율적이에요!

---

GSAP 라이브러리 가져오기

[GSAP 다운로드]에 들어가 라이브러리를 가져오고 자신의 폴더에 저장합니다.

<script src="[gsap.min.js를 저장해놓은 위치]"></script> 를 자신이 구현하려는 파일의 스크립트로 삽입해줍니다.
경로는 자신의 경로로 해주시면 됩니다.

---

HTML 코드 : 마우스 포인터용 div 생성

[mouse__cursor / mouse__cursor2] 이 두개의 클래스를 생성해 마우스 포인터를 구성해주도록 합시다!

<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>

코드 전체보기

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p><span class="style1">Go</span> to <span class=style2>sleep</span>,  then you are the <span class="style3">winner.</span></p>
            <p><span class="style4">일찍 자라</span> 개운한 너가 바로 <span class="style5">진정한</span> 지금 순간의 <span class="style6">승리자이다.</span></p>
        </div>
    </section>
</main>

---

JS코드 : 마우스 움직임과 행동에 따라 이벤트 발생시키기

하단의 코드를 보며 이벤트를 실행시킬 스크립트를 작성해줍니다!

const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const span = document.querySelectorAll(".mouse__wrap span");

//마우스가 움직인다면(mousemove) 실행시킬 스크립트 설정
window.addEventListener("mousemove", e => {

    //gsap를 통한 [cursor, cursor2] 클래스를 가진 요소의 효과 설정
    gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5})
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15})

    //마우스가 들어옴(mouseenter), 마우스가 나갔을때(mouseleave)의 오버 효과
    //mouseenter(자식 요소만) / mouseover(부모요소부터 자식까지 모두) / 이벤트 버블링라 부름
    //span요소에 마우스가 들어오고 나갔을때
    span.forEach(span => {
        
        //마우스가 들어옴(mouseenter)
        span.addEventListener("mouseenter", ()=>{
            cursor.classList.add("active"); //cursor 클래스에 active 클래스 추가
            cursor2.classList.add("active"); //cursor2 클래스에 active 클래스 추가
        })

        //마우스가 나갔을때(mouseleave)
        span.addEventListener("mouseleave", ()=>{
            cursor.classList.remove("active"); //cursor 클래스에 active 클래스 제거
            cursor2.classList.remove("active"); //cursor2 클래스에 active 클래스 제거
        })
    });

    //메뉴에 마우스 들어오고 나갔을때
    document.querySelectorAll("#header ul li a").forEach(a => {

        a.addEventListener("mouseenter", ()=>{
            cursor.classList.add("active");
            cursor2.classList.add("active");
        })

        a.addEventListener("mouseleave", ()=>{
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        })
    })

    //소스보기에 마우스가 들어왔을때
    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");
    })
})

---

결과

---

원본 소스 보기

원본 페이지 보기