마우스 이펙트 02

마우스 이펙트

자바스크립트를 이용한 마우스 효과 만들기 입니다.

---

마우스 이펙트 02 - 마우스 따라다니기(GSAP)

이번 효과는 마우스 이펙트 01과 같지만 스크립트를 GSAP로 만드는 작업입니다.

---

GSAP

GSAP는 GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리로 애니메이션 스크립트를 보다 쉽게 사용할 수 있도록 해줍니다.
또한 GSAP를 사용하면 자바스크립트로 구현할 때 보다 좀 더 애니메이션 효과가 부드러워지는 느낌이 납니다.
GSAP 설치에 대한 설명은 이쪽을 참조해 주세요.

소스보기

<스크립트 파트>
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const span = document.querySelectorAll(".mouse__wrap span");
const menu = document.querySelectorAll("#header li a");
const modal = document.querySelector(".modal__btn");

window.addEventListener("mousemove", e => {
    // 커서 좌표값 할당
    // cursor.style.left = e.pageX -12 + "px";
    // cursor.style.top = e.pageY -12 + "px";
    // cursor2.style.left = e.pageX -15 + "px";
    // cursor2.style.top = e.pageY -15 + "px";

    //GSAP
    gsap.to(cursor, {duration: 0.1, left: e.pageX -12, top: e.pageY -12});
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

    // 오버 효과
    // mouseenter / mouseover / 이벤트 버블링
    span.forEach(span => {
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });

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

    menu.forEach(menu => {
        menu.addEventListener("mouseenter", () => {
            cursor.classList.add("active2");
            cursor2.classList.add("active2");
        });

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

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

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

    // span.forEach(function(){
    //     this.addEventListener("mouseenter", function(){});   //예전엔 함수를 이렇게 썼고 이때 this를 씀. 화살표함수에선 this를 못씀
    // });
});

GSAP를 사용하기 위해선 GSAP를 사용한다고 선언 후 사용해야 합니다. GSAP의 애니메이션 효과 사용법은
https://greensock.com/gsap/를 참조해 주세요.

원본 소스 보기