JavaScript Mouse Effect 02

    <main>
        <section id="mouseType01">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
            <div class="mouse__wrap">
                <p>I don't want a <span>perfect</span> life, I want a happy life</p>
                <p>완벽한 삶을 원하지 않는다, <span>행복한 삶</span>을 원한다</p>
            </div>
        </section>
    </main>

    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }

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

    .mouse__wrap p span {
        border-bottom: 0.15vw dashed rgb(150, 0, 150);
        color: rgb(150, 0, 150);
    }

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

    .mouse__wrap p span {
        border-bottom: 0.15vw dashed #fff;
    }

    .cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        z-index: 9999;
        background-color: rgba(255, 255, 255, 0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }

    .cursor-follower {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }

    .cursor.active {
        transform: scale(0);
    }

    .cursor-follower.active {
        transform: scale(6);
        background: rgba(51, 241, 194, 0.7);
    }

    .cursor.show {
        transform: scale(0);
    }

    .cursor-follower.show {
        border-radius: 25%;
        transform: rotateX(180deg) rotateY(360deg) scale(3);
        background: rgba(238, 112, 255, 0.7);
    }

    const cursor = document.querySelector(".cursor");
    const followingCursor = document.querySelector(".cursor-follower");
    const mouseSpan = document.querySelectorAll(".mouse__wrap span");
    
    window.addEventListener("mousemove", (event) => {
        gsap.to(cursor, {duration: 0.3, left: event.pageX -5, top: event.pageY -5});
        gsap.to(followingCursor, {duration: 0.8, left: event.pageX -15, top: event.pageY -15});
        
        // 오버 효과
        // span에 마우스를 올려놓을때 active 이름 추가 / 나갔을때 삭제
        // mouseover, mouseenter / mouseout, mouseleave 차이점, 이벤트 버블링 내용-> 티스토리로
        mouseSpan.forEach((span) => {
            span.addEventListener("mouseover", () => {
                document.querySelector(".cursor").classList.add("active");
                document.querySelector(".cursor-follower").classList.add("active");
            });

            span.addEventListener("mouseout", () => {
                document.querySelector(".cursor").classList.remove("active");
                document.querySelector(".cursor-follower").classList.remove("active");
            });
        });

        const siteInfo = document.querySelector(".info");
        siteInfo.addEventListener("mouseenter", () => {
            document.querySelector(".cursor").classList.add("show");
                document.querySelector(".cursor-follower").classList.add("show");
        });

        siteInfo.addEventListener("mouseleave", () => {
            document.querySelector(".cursor").classList.remove("show");
                document.querySelector(".cursor-follower").classList.remove("show");
        });

        // 출력
        document.querySelector(".pageX").innerHTML = event.pageX;
        document.querySelector(".pageY").innerHTML = event.pageY;