Mouse Effect - 따라가기(2)

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

window.addEventListener("mousemove", e => {         //마우스 움직일 때 마다
    //커서 좌표값 할당
    // cursor.style.left = e.pageX -5 + "px";
    // cursor.style.top = e.pageY -5 + "px";
    // follower.style.left = e.pageX -15 + "px";
    // follower.style.top = e.pageY -15 + "px";

    gsap.to(cursor, {           //gsap으로 부드러운 애니메이션 효과
        duration: .3,
        left: e.pageX - 5,
        top: e.pageY - 5
    })
    gsap.to(follower, {
        duration: .8,
        left: e.pageX - 15,
        top: e.pageY - 15
    })

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

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

//.info 영역에서의 마우스효과
document.querySelector(".info").addEventListener("mouseover", () => {
    cursor.classList.add("show");
    follower.classList.add("show");
})
document.querySelector(".info").addEventListener("mouseout", () => {
    cursor.classList.remove("show");
    follower.classList.remove("show");
})

 

마우스 따라가기2 사이트