Mouse Effect Reference v1.0 </doc>

// 출력용
    window.addEventListener("mousemove", function(event){
        document.querySelector(".clientX").innerHTML = event.clientX;
        document.querySelector(".clientY").innerHTML = event.clientY;
        document.querySelector(".offsetX").innerHTML = event.offsetX;
        document.querySelector(".offsetY").innerHTML = event.offsetY;
        document.querySelector(".pageX").innerHTML = event.pageX;
        document.querySelector(".pageY").innerHTML = event.pageY;
        document.querySelector(".screenX").innerHTML = event.screenX;
        document.querySelector(".screenY").innerHTML = event.screenY;
    });
    
    // 마우스 움직이기
    window.addEventListener("mousemove",function(e){
        let cursor = document.querySelector(".cursor");
        let x = e.clientX - 25 + "px";
        let y = e.clientY - 25 + "px";
    
        cursor.style.cssText = "left:" + x + "; top:" + y;
        // 오버효과
        // document.querySelector(".contents em").addEventListener("mouseenter", function(){});
        // document.querySelector(".contents em").addEventListener("mouseleave", function(){});
    
        // 마무리
        document.querySelectorAll(".contents em").forEach( elem => {
            elem.addEventListener("mouseenter", () => {
                document.querySelector(".cursor").classList.add("active");
            });
            elem.addEventListener("mouseleave", () => {
                document.querySelector(".cursor").classList.remove("active");
            });
        });
    });

const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");
const cursorText = document.querySelectorAll(".contents em");
const cusrorWidth = cursor.clientWidth / 2;
const followerWidth = follower.clientWidth / 2;

// 출력용
document.addEventListener("mousemove", e => {
    document.querySelector(".pageX").textContent = e.pageX;
    document.querySelector(".pageY").textContent = e.pageY;
});

// 마우스 움직이기
document.addEventListener("mousemove", e => {
    gsap.to(cursor, {duration: .3, left: e.pageX - cusrorWidth, top: e.pageY - cusrorWidth});
    gsap.to(follower, {duration: .8, left: e.pageX - followerWidth, top: e.pageY - followerWidth});    
});

// 다중선택
cursorText.forEach(elem => {
    elem.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
        follower.classList.add("active");  
    });
    elem.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        follower.classList.remove("active");
    });
});