02. 마우스 이펙트 : 따라다니기 / gsap

        // highlight();
        // modal();
        // tabMenu();
        
       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
            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,mouseenter / mouseout,mouseleave /이벤트 버블링
            document.querySelectorAll(".mouse__wrap p span").forEach(span =>{
                span.addEventListener("mouseenter",() => {
                    cursor.classList.add("active")
                    follower.classList.add("active")
                })
                span.addEventListener("mouseleave",() => { //mouseout과 효과가 비슷함
                    cursor.classList.remove("active")
                    follower.classList.remove("active")
                })
            })
            //출력
            document.querySelector(".pageX").innerText = e.pageX;
            document.querySelector(".pageY").innerText = e.pageY;
        })


        document.querySelectorAll(".info").forEach ( span =>{
            span.addEventListener("mouseenter",() => {
                cursor.classList.add("active")
                follower.classList.add("cursor-info")
            })
            span.addEventListener("mouseleave",() => { 
                cursor.classList.remove("active")
                follower.classList.remove("cursor-info")
            })
        })

마우스이펙트02 사이트