EFFECT | MOUSE | 마우스 따라다니기(GSAP)

mouseEffect | 마우스 따라다니기(GSAP)

오늘의 목표
👉🏻 GSAP를 활용해 더 부드럽게 마우스 효과 설정하기

---

1. 사이트 구조 살펴보기

CSS 살펴보기

<style>
    /* mouseType */
    .mouse__wrap {
        /* vw하면 스크롤 생김 */
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: none;
        /* 두줄효과 */
        flex-direction: column;
        color: #fff;
        overflow: hidden;
    }

    .mouse__wrap p {
        font-size: 2vw;
        line-height: 2;
        font-weight: 300;
    }

    .mouse__wrap p:last-child {
        font-size: 3vw;
        font-weight: 400;
    }

    .mouse__wrap span {
        border-bottom: 0.15vw dashed orange;
        color: orange;
    }

    @media (max-width: 800px) {
        .mouse__wrap p {
            padding: 0 20px;
            font-size: 24px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 10px;
        }

        .mouse__wrap p:last-child {
            font-size: 40px;
            line-height: 1.5;
            word-break: keep-all;
        }
    }

    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        z-index: 9999;
        /* border: 2px solid #fff; */
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    .mouse__cursor2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        z-index: 9998;
        /* border: 2px solid #fff; */
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    .mouse__cursor.active {
        transform: scale(0);
    }
    .mouse__cursor2.active {
        transform: scale(5);
        background: rgba(255,166,0,0.5);
    }
    .mouse__cursor2.active2 {
        transform: scale(5);
        background: rgba(94, 255, 0, 0.5);
    }
    .mouse__cursor2.active3 {
        transform: scale(5);
        background: rgba(0, 119, 255, 0.5);
    }
</style>

HTML 살펴보기

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p>
                Success <span class="style2">isn't permanent</span>, and failure <span class="style3">isn't fatal.</span>
            </p>
            <p>
                성공은 <span class="style4">영원하지 않고</span>, 실패는 <span class="style6">치명적이지 않다.</span>
            </p>
        </div>
    </section>
</main>

2. script 살펴보기

<script>
    const cursor = document.querySelector(".mouse__cursor");
    const cursor2 = document.querySelector(".mouse__cursor2");
    const span = document.querySelectorAll(".mouse__wrap span");
    // const menu = ;
    // const modalBtn = ;

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

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

        // 오버 효과(mouseenter / mouseover / 이벤트 버블링, 자식요소전달 유무)
        // span.forEach(function => {
        //     this.addEventListener("mouseenter", function(){});
        // });
        // 화살표 함수에서는 this 못씀
        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").addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active2");
        });
        document.querySelector("#header").addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active2");
        });

        document.querySelector(".modal__btn").addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active3");
        });
        document.querySelector(".modal__btn").addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active3");
        });
    });
</script>

원본 소스 보기

실제 사이트 보기