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

오늘은 GSAP를 사용하여 웹 페이지에서 마우스 움직임에 따라 다양한 이벤트를 처리하는 JavaScript 예제를 배워보도록 하겠습니다.
코드는 크게 두 부분으로 나뉩니다:
마우스 이동 이벤트를 기록하고 출력하는 부분과, 커스텀 마우스 커서의 모양을 변경하는 부분입니다. 이 코드를 통해 웹 페이지에서 마우스의 움직임과 위치에 따라 동적인 상호작용을 구현할 수 있으며, 특정 요소 위에 마우스가 위치할 때 커서의 모양을 변경하여 사용자 경험을 향상시킬 수 있습니다.

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

    <script>
        // info
        window.addEventListener("mousemove", function (event) {
            console.log(event);
            document.querySelector(".clientX").innerText = event.clientX;
            document.querySelector(".offsetX").innerText = event.offsetX;
            document.querySelector(".pageX").innerText = event.pageX;
            document.querySelector(".screenX").innerText = event.screenX;
        });

        // mouse
        const cursor = document.querySelector(".cursor");

        window.addEventListener("mousemove", function (e) {
            cursor.style.left = e.clientX - 50 + "px";
            cursor.style.top = e.clientY - 50 + "px";
        });

        document.querySelector(".main__inner p span:nth-child(1)").addEventListener("mouseover", function () {
            cursor.classList.add("span1");
        });
        document.querySelector(".main__inner p span:nth-child(1)").addEventListener("mouseout", function () {
            cursor.classList.remove("span1");
        });

        document.querySelector(".main__inner p span:nth-child(2)").addEventListener("mouseover", function () {
            cursor.classList.add("span2");
        });
        document.querySelector(".main__inner p span:nth-child(2)").addEventListener("mouseout", function () {
            cursor.classList.remove("span2");
        });

        document.querySelector(".main__inner p span:nth-child(3)").addEventListener("mouseover", function () {
            cursor.classList.add("span3");
        });
        document.querySelector(".main__inner p span:nth-child(3)").addEventListener("mouseout", function () {
            cursor.classList.remove("span3");
        });

        document.querySelector(".main__inner p span:nth-child(4)").addEventListener("mouseover", function () {
            cursor.classList.add("span4");
        });
        document.querySelector(".main__inner p span:nth-child(4)").addEventListener("mouseout", function () {
            cursor.classList.remove("span4");
        });
    </script>

01. 마우스 이동 이벤트 기록 및 출력

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

이 부분은 마우스가 움직일 때마다 이벤트 리스너를 호출합니다. 여기서 event 객체는 마우스 이벤트에 대한 정보를 담고 있습니다.

console.log(event);:

마우스 이벤트 객체를 콘솔에 출력합니다. 이를 통해 개발자는 이벤트 객체 내의 다양한 프로퍼티를 확인할 수 있습니다.

document.querySelector(".clientX").innerText = event.clientX; 등:

clientX, offsetX, pageX, screenX와 같은 마우스 위치 관련 프로퍼티들의 값을 선택한 HTML 요소의 텍스트로 설정합니다. 이를 통해 마우스의 다양한 위치 값을 실시간으로 화면에 표시할 수 있습니다.

02. 커스텀 마우스 커서 모양 변경

const cursor = document.querySelector(".cursor");:

CSS 클래스가 cursor인 요소를 선택하여 cursor 변수에 할당합니다. 이 요소는 사용자 정의 마우스 커서로 사용됩니다.

마우스 이동 이벤트 리스너 내에서 cursor.style.left = e.clientX - 50 + "px";와 cursor.style.top = e.clientY - 50 + "px";

를 통해 커서의 위치를 마우스 위치에 따라 조정합니다. 여기서 - 50은 커서 이미지의 중심을 마우스 포인터 위치로 맞추기 위한 값입니다.

document.querySelector(".main__inner p span:nth-child(n)").addEventListener("mouseover", ...);:

이 코드는 main__inner 클래스를 가진 요소 내의 p 태그 안에 있는 span 요소 중 n번째 요소에 마우스가 올라갔을 때 이벤트 리스너를 추가합니다. mouseover 이벤트는 마우스가 요소 위로 올라갔을 때 발생합니다.

cursor.classList.add("span1"); 등:

마우스가 특정 span 요소 위로 올라가면, 해당 span 요소에 해당하는 클래스 (span1, span2, span3, span4)를 cursor 요소의 클래스 리스트에 추가합니다. 이를 통해 CSS를 사용하여 각각의 상황에 맞는 커서 모양을 지정할 수 있습니다.

addEventListener("mouseout", ...);

는 mouseover와 반대로 마우스가 요소에서 벗어났을 때 발생하는 이벤트를 처리하며, 이때 classList.remove(…);를 통해 추가했던 클래스를 제거하여 원래의 커서 모양으로 돌아갑니다.

이 코드를 통해 웹 페이지에서 마우스의 움직임과 위치에 따라 동적인 상호작용을 구현할 수 있으며, 특정 요소 위에 마우스가 위치할 때 커서의 모양을 변경하여 사용자 경험을 향상시킬 수 있습니다.