Mouse Effect02 - 따라다니기2

SBDB_뉴유 2022. 2. 25. 08:56
const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".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, {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,mouseout /mouseenter,mouseleave 차이점
    document.querySelectorAll(".mouse__wrap span").forEach(span => {
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            follower.classList.add("active");
        });
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            follower.classList.remove("active");
        });
    })

    //title에 오버효과
    document.querySelectorAll(".title a").forEach(a => {
        a.addEventListener("mouseenter", () => {
            cursor.classList.add("title");
            follower.classList.add("title");
        });
        a.addEventListener("mouseleave", () => {
            cursor.classList.remove("title");
            follower.classList.remove("title");
        });
    })

    //number에 오버효과
    document.querySelectorAll(".number a").forEach(a => {
        a.addEventListener("mouseenter", () => {
            cursor.classList.add("number");
            follower.classList.add("number");
        });
        a.addEventListener("mouseleave", () => {
            cursor.classList.remove("number");
            follower.classList.remove("number");
        });
    })

    //source에 오버효과
    document.querySelectorAll(".source button").forEach(a => {
        a.addEventListener("mouseenter", () => {
            cursor.classList.add("source");
            follower.classList.add("source");
        });
        a.addEventListener("mouseleave", () => {
            cursor.classList.remove("source");
            follower.classList.remove("source");
        });
    })

    //출력
    document.querySelector(".pageX").innerText = e.pageX;
    document.querySelector(".pageY").innerHTML = e.pageY;
})