mouseeffect02 - 따라다니기02

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

window.addEventListener("mousemove", e =>{
    //커서 좌표값 할당
    // cursor.style.left = e.pageX + "px";
    // cursor.style.top = e.pageY + "px";
    // follow.style.left = e.pageX - 10+ "px";
    // follow.style.top = e.pageY - 10+ "px";
    
    gsap.to(cursor, {duration : .3, left : e.pageX, top : e.pageY});
    gsap.to(follow, {duration : .8, left : e.pageX-10, top : e.pageY-10});

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

    document.querySelectorAll( ".info > div").forEach(span =>{
        span.addEventListener("mouseenter", () =>{
            cursor.classList.add("show")
            follow.classList.add("show")
        })
        span.addEventListener("mouseleave", () =>{
            cursor.classList.remove("show")
            follow.classList.remove("show")
        })
    })
    //출력
    document.querySelector(".pageX").innerHTML = e.pageX;
    document.querySelector(".pageY").innerHTML = e.pageY;
})