JavaScript Mouse Effect02

<!-- main -->
    <main>
        <section id="mouseType02">
            <div class="cursor"></div>
            <div class="cursor-follower"></div>
            <div class="mouse__wrap">
                <p>If you would be <span>loved</span>, love and be <span>lovable</span>.</p>
                <p><span>사랑</span>받고 싶다면, 사랑하고 <span>사랑스러워져라</span></p>
            </div>
        </section>
    </main>
<!-- //main -->

body::before {
    background: rgba(0,0,0,0.4);
}
.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:last-child {
    font-size: 3vw;
    font-weight: 400;
}
.mouse__wrap p span {
    border-bottom: 0.15vw dashed aquamarine;
    color: aquamarine;
}
.cursor {
    position: absolute;
    left: -0;
    top: -0;
    width: 10px;
    height: 10px;
    z-index: 9999;
    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-follower {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 0;
    top: 0;border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s opacity 0.2s;
}
.cursor.active {
    transform: scale(0);
}
.cursor-follower.active {
    transform: scale(5);
    background: rgba(96, 194, 218, 0.507);
}
.cursor.show {
    transform: scale(0);
}
.cursor-follower.show {
    transform: scale(3);
    background: rgba(224, 195, 100, 0.658);
}

const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");

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


    gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY -5});
    gsap.to(follower, {duration: .8, left: e.pageX -15, top: e.pageY -15});


    //오버 효과
    //span 오버 했을때 클래스 active 추가/ 나갔을때 active 삭제
    //mouseover, mouseenter, / mouseout, mouseleave / 이벤트 버블링
    document.querySelectorAll(".mouse__wrap span").forEach(span =>{
        span.addEventListener("mouseover", ()=> {
            cursor.classList.add("active");
            follower.classList.add("active");
        });
        span.addEventListener("mouseleave", ()=> {
            cursor.classList.remove("active");
            follower.classList.remove("active");
        });
    });   

    //오버 효과2
    document.querySelectorAll(".info").forEach(e =>{
        e.addEventListener("mouseover", ()=> {
            cursor.classList.add("show");
            follower.classList.add("show");
        });
        e.addEventListener("mouseleave", ()=> {
            cursor.classList.remove("show");
            follower.classList.remove("show");
        });
    });   

    //출력
    document.querySelector(".pageX").innerText = event.pageX; //전체 문서를 기준으로 수평 좌표
    document.querySelector(".pageY").innerText = event.pageX; //전체 문서를 기준으로 수직 좌표
})