GSAP) GSAP로 마우스 효과 주기1

오늘은 GSAP를 사용하여 마우스의 움직임에 반응하여 커서를 변경하고, 페이지의 정보를 표시하는 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다. 각 요소에 마우스 이벤트를 추가하여 해당 요소에 마우스가 진입하거나 빠져나갈 때 커서에 특정 클래스를 추가하거나 제거하여 스타일을 변경합니다.

먼저 전체 코드를 보도록 하겠습니다.

   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script>
        // info
        window.addEventListener("mousemove", function (event) {
            document.querySelector(".clientY").innerText = event.clientY;
            document.querySelector(".offsetY").innerText = event.offsetY;
            document.querySelector(".pageY").innerText = event.pageY;
            document.querySelector(".screenY").innerText = event.screenY;
        });

        // mouse
        document.addEventListener("mousemove", (e) => {
            gsap.to(".cursor", { duration: 0.3, left: e.clientX - 10, top: e.clientY - 10 })
            gsap.to(".cursor2", { duration: 0.7, left: e.clientX - 50, top: e.clientY - 50 })
        });

        document.querySelector(".s").addEventListener("mouseenter", () => {
            document.querySelector(".cursor").classList.add("active", "yellow");
            document.querySelector(".cursor2").classList.add("active", "yellow");
        });
        document.querySelector(".s").addEventListener("mouseleave", () => {
            document.querySelector(".cursor").classList.remove("active", "yellow");
            document.querySelector(".cursor2").classList.remove("active", "yellow");
        });

        document.querySelector(".j").addEventListener("mouseenter", () => {
            document.querySelector(".cursor").classList.add("active", "red");
            document.querySelector(".cursor2").classList.add("active", "red");
        });
        document.querySelector(".j").addEventListener("mouseleave", () => {
            document.querySelector(".cursor").classList.remove("active", "red");
            document.querySelector(".cursor2").classList.remove("active", "red");
        });

    </script>

코드에 사용된 주요 기능

1. gsap.to():

요소의 애니메이션을 설정하는 메서드입니다. 마우스 이벤트가 발생할 때마다 .cursor와 .cursor2 요소의 위치를 변경하여 마우스 위치에 따라 커서를 이동시킵니다. 이 때, duration 옵션을 통해 애니메이션 지속 시간을 설정합니다.

1. classList.add() 및 classList.remove():

요소에 클래스를 추가하거나 제거합니다. 이 코드에서는 .cursor와 .cursor2 요소에 active 클래스를 추가하여 해당 요소를 활성화하고, 추가로 yellow 또는 red 클래스를 추가하여 커서의 색상을 변경합니다.

1. 이벤트 리스너(addEventListener()):

요소에 이벤트를 등록하고 해당 이벤트가 발생할 때 실행할 함수를 지정합니다. 이 코드에서는 .s와 .j 요소에 mouseenter 및 mouseleave 이벤트를 추가하여 마우스가 해당 요소 위에 진입하거나 빠져나갈 때 커서의 스타일을 변경합니다.

코드 별 자세한 설명

이 코드는 마우스의 움직임에 반응하여 커서를 변경하고, 페이지의 정보를 표시하는 기능을 구현한 것입니다. 각 줄에 대해 자세히 설명하겠습니다:

1. GSAP 라이브러리를 CDN을 통해 로드합니다.

   <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>:
   

1. 윈도우의 mousemove 이벤트에 대한 이벤트 리스너를 추가합니다.
   이벤트가 발생할 때마다 함수가 실행되며, 함수 내에서는 마우스의 위치 정보를 표시합니다.

   window.addEventListener("mousemove", function (event) { ... });:
   

   • event.clientY: 현재 마우스의 Y 좌표
   • event.offsetY: 이벤트가 발생한 요소의 상대적인 Y 좌표
   • event.pageY: 현재 문서의 Y 좌표
   • event.screenY: 현재 화면의 Y 좌표

1. 문서 전체에 대한 mousemove 이벤트에 대한 이벤트 리스너를 추가합니다.

   document.addEventListener("mousemove", (e) => { ... });:
   

   • 마우스가 움직일 때마다 실행되며, 함수 내에서는 .cursor와 .cursor2 요소의 위치를 변경하여 커서의 위치를 조절합니다.
   • gsap.to()를 사용하여 각 커서의 위치를 조정하고, 이를 마우스의 위치에 따라 이동시킵니다.

1. .s 클래스를 가진 요소에 대한 mouseenter 이벤트에 대한 이벤트 리스너를 추가합니다.

   document.querySelector(".s").addEventListener("mouseenter", () => { ... });:
   

   • 해당 요소에 마우스가 진입하면 실행되며, 함수 내에서는 .cursor와 .cursor2 요소에 active 클래스와 yellow 클래스를 추가하여 커서의 색상을 변경합니다.

1. .s 클래스를 가진 요소에 대한 mouseleave 이벤트에 대한 이벤트 리스너를 추가합니다.

   document.querySelector(".s").addEventListener("mouseleave", () => { ... });:
   

   • 해당 요소에서 마우스가 빠져나가면 실행되며, 함수 내에서는 .cursor와 .cursor2 요소에서 active 클래스와 yellow 클래스를 제거하여 원래 상태로 돌립니다.

1. .j 클래스를 가진 요소에 대한 mouseenter 및 mouseleave 이벤트에 대한 이벤트 리스너를 추가합니다.

   document.querySelector(".j").addEventListener("mouseenter", () => { ... }); 및 document.querySelector(".j").addEventListener("mouseleave", () => { ... });:
   

   위와 같은 방식으로 커서의 색상을 변경하고 원래 상태로 돌립니다.