마우스에 효과를 줘보자! [커서변화] - 2

CSS

<style>
    .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.7vw;
        line-height: 1.9;
    }
    .mouse__text p span {
        color: #29fbff;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        z-index: 99999;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 1s;
    }
    .mouse__cursor2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        z-index: 9998;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 1s;
    }
    .mouse__cursor.active {
        transform: scale(0);
    }
    .mouse__cursor2.active {
        transform: scale(5);
        background-color: #13a8ab68;
    }
    .mouse__cursor2.active2 {
        transform: scale(5) rotateY(720deg);
        background-color: #29fbff68;
    }
    .mouse__cursor2.active3 {
        transform: scale(5) rotateY(720deg);
        background-color: #29fbff68;
        transform: scale(5) skew(40deg);
    }
    </style>

 

CSS 부분입니다.

• .mouse__wrap의 cursor: none; 은 효과를 강조하기 위하여 마우스 커서를 가렸습니다.
• .mouse__text는 화면의 가운데에 오는 글귀입니다.
  • display : flex; : 부모 요소를 flex container로 지정합니다. 자식 요소(flex item)들에게 속성을 지정 할 수 있습니다.
  • align-itmes : center; 
  • justify-content : center;: flex container 의 모든 flex item들을 세로로 가운데로 정렬합니다.
  • flex-direction: column; flex container의 주 축(main axis)을 세로 방향(column)으로 설정합니다.
  • overflow: hidden; 부모 요소의 내용이 넘칠 경우, 넘치는 부분을 숨깁니다. 이를 통해 요소 내부의 내용이 화면 밖으로 나가는 것을 방지하고, 요소의 크기를 조절할 수 있습니다.
• .mouse__cursor에 대한 것들은 마우스커서를 만들기 위한 스타일입니다. 여기에 트랜지션이 포함되어있습니다.
• mouse__cursor.active 마우스 커서의 움직임에 대한 설정입니다.

Script

 //선택자
    const cursor = document.querySelector(".mouse__cursor");
    const cursor2 = document.querySelector(".mouse__cursor2");
    const cursor3 = document.querySelector(".mouse__cursor3");
    // const cursors = document.querySelector(".mouse__text span");

• 마우스 커서를 cursor라는 변수로 선언하고 선택자를 사용해줍니다.

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

• window에서 마우스 좌표값을 가져오는 코드입니다.
  • e.pageX는 mouseEvent 객체의 속성 중 하나로 마우스의 클릭 또는 이동 이벤트가 발생한 위치를 가로 좌표로 나타냅니다.
  • e.pageY는 mouseEvent 객체의 속성 중 하나로 마우스의 클릭 또는 이동 이벤트가 발생한 위치를 가로 좌표로 나타냅니다.

 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});

gsap이라는 걸 사용해서 코드를 작성했습니다.

GSAP

GreenSock Animation Platform의 약어로, JavaScript 기반의 애니메이션 라이브러리입니다.

GSAP는 웹 개발자들이 HTML, CSS 및 JavaScript를 사용하여 매우 다양한 유형의 애니메이션을 만들 수 있도록 도와줍니다.

 

 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.querySelector("#header h1").addEventListener("mouseenter", () => {
    cursor.classList.add("active2");
    cursor2.classList.add("active2");
})
document.querySelector("#header h1").addEventListener("mouseleave", () => {
    cursor.classList.remove("active2");
    cursor2.classList.remove("active2");
})
document.querySelector("#footer a").addEventListener("mouseenter", () => {
    cursor.classList.add("active3");
    cursor2.classList.add("active3");
})
document.querySelector("#footer a").addEventListener("mouseleave", () => {
    cursor.classList.remove("active3");
    cursor2.classList.remove("active3");
})

본문에서의 span이 한개가 아닌 다중이기 때문에 querySelectorAll과 forEach를 사용했습니다. 

헤더(header)와 메일(footer)의 경우 각각의 선택자와 active를 만들어 적용해 주었습니다.

 

mouseenter, mouseleave

mouseenter 이벤트는 마우스 커서가 특정 요소 안으로 이동할 때 발생합니다.
mouseleave 이벤트는 마우스 커서가 특정 요소 안에서 벗어날 때 발생합니다.

하위 요소에는 영향을 미치지 않습니다.

 

mouseover와 mouseout도 동일하나 하위요소에 영향을 미친다는 차이점이 있습니다.