Mouse Effect - 커서 + 이미지 오버 효과

const cursor = document.querySelector(".cursor");               //div.cursor
const follower = document.querySelector(".cursor-follower");    //div.cursor-follower,커서에 점 따라다니는 효과
const hoverText = document.querySelectorAll(".mouse__wrap div p span");
let hover = 1;

function move(e, hover){
    gsap.to(cursor, {
        duration: .3,
        left: e.pageX - 5,
        top: e.pageY - 5
    })
    if(hover){
        gsap.to(follower, {
            duration: .8,
            left: e.pageX + 35,
            top: e.pageY - 25
        })
    } else {
        gsap.to(follower, {
            duration: .8,
            left: e.pageX + 35,
            top: e.pageY - 250
        })
    }
}

window.addEventListener("mousemove", e => {
    move(e, hover);
});


hoverText.forEach((span,i) => {
    function showImage(){
        hover=0;
        follower.classList.add(`ail${i+1}`);
    }

    function outImage(){
        hover=1;
        follower.classList.remove(`ail${i+1}`);
    }

    span.addEventListener("mouseenter", showImage);
    span.addEventListener("mouseleave", outImage);
})

 

커서 + 이미지 오버 효과 사이트