[JAVASCRIPT EFFECT] 마우스 이펙트 (Mouse Effect) 02 - GSAP를 사용하여 커서의 움직임을 부드럽게 개선

무근본 일반인 2023. 3. 21. 13:25

2023. 3. 21. 13:25

728x90

완성 화면

코드 보기 / CSS

.mouse__wrap {
            cursor: none;
        }
        .mouse__text {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow: hidden;
        }
        .mouse__text p {
            font-size: 2.5vw;
            line-height: 2;
        }
        .mouse__text p:last-child {
            font-size: 2vw;
        }
        .mouse__text p span {
            color: #9b07f0;
        }
        .mouse__cursor {
            position: absolute;
            left: 0;
            top: 0;
            width: 10px;
            height: 10px;
            z-index: 9999;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.37);
            user-select: none;
            pointer-events: none;
            transform: 0.3s;
            transition: all 0.6s;
        }
        .mouse__cursor2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            z-index: 9999;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.37);
            user-select: none;
            pointer-events: none;
            transform: 0.3s;
            transition: all 0.6s;
        }
        .mouse__cursor.active {
            transform: scale(0);
        }
        .mouse__cursor2.active {
            transform: scale(5) rotateY(720deg);
            background-color: #4303698c;
        }
        .mouse__cursor.active2 {
            transform: scale(2) rotateX(720deg);
            background-color: #0340698d;
        }
        .mouse__cursor2.active2 {
            transform: scale(5) rotateY(720deg);
            background-color: #0340698d;
        }
        .mouse__cursor.active3 {
            transform: scale(3) rotateY(720deg);
            background-color: #6903288c;
        }
        .mouse__cursor2.active3 {
            transform: scale(5) rotateX(720deg);
            background-color: #6903288c;
        }

.mouse__wrap

: 커서를 감싸는 전체 영역에 대한 스타일을 정의한다.

여기에서는 마우스 커서를 숨기는 역할(cursor: none;)을 한다.

.mouse__text

: 커서 이펙트를 적용할 텍스트 영역에 대한 스타일을 정의한다.

텍스트를 가운데 정렬하고, 이 영역은 화면 전체 높이를 차지하도록( height: 100vh) 설정한다.

.mouse__text p

: 텍스트 영역 내부 단락에 대한 스타일을 정의한다.

여기에서는 텍스트의 글꼴 크기(font-size)와 줄 간격(line-height)을 설정한다.

.mouse__text p:last-child

: 마지막 단락에 대한 스타일을 정의한다.

여기에서는 글꼴 크기를 더 작게 조절한다.

.mouse__text p span

: 단락 내부의 특정 텍스트에 대한 스타일을 정의한다.

텍스트 중 일부를 강조하기 위해 글자색을 보라색(#9b07f0)으로 설정한다.

.mousecursor, .mousecursor2

: 두 가지 유형의 마우스 커서의에 대한 디자인을 설정한다.

크기, 배경색, 변형 및 애니메이션 속성을 사용하며, cursor보다 cursor2의 크기가 더 크다.

.mouse__cursor.active

: 커서가 활성화 될 때 적용되는 스타일을 정의한다. scale( ) 속성을 사용하여 마우스 커서의 크기를 줄이거나 키우는 효과를 주며, 배경색을 변경 시키는 등의 속성을 가지고 있다.

코드 보기 / JAVASCRIPT

 		//선택자
        const cursor = document.querySelector(".mouse__cursor");
        const cursor2 = document.querySelector(".mouse__cursor2");

        //좌표값
        window.addEventListener("mousemove", e =>{
            gsap.to(cursor,{duration:0.1, left: e.pageX-5, top: e.pageY-5});
            gsap.to(cursor2,{duration:0.3, left: e.pageX-15, top: e.pageY-15});

            document.querySelectorAll(".mouse__text 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`);
               });
        });

            document.querySelectorAll("#header li a").forEach((e, i) => {
                    e.addEventListener("mouseenter", () => {
                        cursor.classList.add(`active${i}`);
                        cursor2.classList.add(`active${i}`);
                    });
                    e.addEventListener("mouseleave", () => {
                        cursor.classList.remove(`active${i}`);
                        cursor2.classList.remove(`active${i}`);
                    });
        });
    });

해당 코드는 마우스 커서가 움직일 때, 마우스 커서의 위치를 변경하고, 마우스 커서 위에 있는 요소에 대한 처리를 하는 JavaScript 코드이다.

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

const cursor2 = document.querySelector(".mouse__cursor2");

: const cursor, cursor2는 각각 class가 ".mouse__cursor"와 ".mouse__cursor2"인 요소를 찾아서 변수에 할당한다.

window.addEventListenter("mousemove", e => {

: 윈도우 전체에서 마우스 커서의 움직임을 감지하고, 이동한 위치의 좌표 값을 e.pageX, epageY로 받아온다.

gsap.to(cursor,{duration:0.1, left: e.pageX-5, top: e.pageY-5});
gsap.to(cursor2,{duration:0.3, left: e.pageX-15, top: e.pageY-15});}

:gsap 라이브러리를 이용하여 cursor와 cursor2의 위치를 변경한다.

document.querySelectorAll(".mouse__text span").forEach(span => {...}

:class가 "mouse__text"인 요소 안에 있는 모든 span 요소를 찾아서 각각에 대하여 mouseente와 mouseleave 이벤트를 등록한다.

마우스가 span 요소 위에 올라갔을 때에는 cursor와 cursor2의 class 이름이 "active"인 클래스를 추가하고, 마우스가 span 요소에서 벗어나면 해당 class를 제거한다.

document.querySelectorAll("#header li a").forEach((e,i => {.....})

: 아이디(ID)가 header 요소 안에 있는 모든 li 요소 안의 모든 a 요소를 찾아서 각가에 대하여 mouseenter와 mouseleave 이벤트를 등록한다.

마우스가 a 요소 위에 올라갔을 때는 cursor와 coursor2 class에 이름이 active + i (0부터 시작하는 인덱스)인 class를 추가하고, 마우스가 a 요소에서 벗어나면 해당 class를 제거한다.

※ 비슷한 두 이벤트 속성의 차이

mouseover ↔ mouseenter , mouseout ↔ mouseleave

:마우스 이벤트 중에서도 유사한 역할을 하는 이벤트이다.

mouseover, mouseout	mouseenter, mouseleave
마우스 포인터가 요소 안으로 진입할 때 발생한다. 즉, 마우스 포인터가 요소 내의 어떤 자식 요소 위에 올라가면 이벤트가 발생하는 것이다. 이벤트가 발생하면 이벤트 버블링^[각주:1]이 발생하기 때문에 부모 요소까지 mouseover 이벤트가 발생한다.	마우스 포인터가 요소 안으로 진입할 때 발생하지만 이벤ㄴ트 버블링이 발생하지 않는다. 부모 요소에 mouseenter 이벤트가 등록되어 있다고 해도, 자식 요소에 마우스 포인터가 진입할 때에는 부모 요소의 mouseenter 이벤트가 발생하지 않는다.

mouseover와 mouseout이벤트는 필요한 경우에만 사용하고, mouseenter, mouseleave 이벤트는 일반적으로 사용된다.

mouseout 이벤트는 요소를 벗어날 때 이벤트 버블링을 사용해 다른 요소에 대한 처리를 수행할 때 주로 사용하고, mouseleave 이벤트는 특정 요소에서 벗어났을 때의 처리를 수행하기 위해 사용한다.

이벤트가 발생한 요소에서 상위 요소까지 이벤트가 전파되는 것. [본문으로]

Fiat Lux