Mouse Effcet 02. 마우스 따라다니기 / gsap

//설명. 참고사항.

  const cursor = document.querySelector(".cursor");
        const follow = document.querySelector(".cursor-follower");
        
        window.addEventListener("mousemove", (e) => {
            //커서에 좌표 값 할당
            // cursor.style.left = e.pageX -5 + "px";
            // cursor.style.top = e.pageY  -5 + "px";
            // follow.style.left = e.pageX -15 + "px";
            // follow.style.top = e.pageY  -15 + "px";

            //gsap 플러그인을 사용해서 좌표값 할당한 애니메이션 적용
            gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY  -5});
            gsap.to(follow, {duration: .8, left: e.pageX -15, top: e.pageY  -15});

            //오버효과
            //span에 오버 했을 때 클래스 active를 추가 / 나갔을 때 active 삭제
            document.querySelectorAll(".mouse__wrap span").forEach((el)=>{
                el.addEventListener("mouseenter",()=>{                  //mouseover 대신 mouseenter를 쓸 수 있음
                        cursor.classList.add("active");                 //active 클래스 추가
                        follow.classList.add("active");
                    });
                el.addEventListener("mouseleave",()=>{                  //mouseout 대신 mouseleave를 쓸 수 있음
                    cursor.classList.remove("active");                  //active 클래스 삭제
                    follow.classList.remove("active");
                });
            });
            //info에 마우스 오버 했을때
            document.querySelector(".title").addEventListener("mouseover",()=>{
                cursor.classList.add("show");                                   //마우스 오버하면 show 클래스 추가
                follow.classList.add("show");                                   
            });
            document.querySelector(".title").addEventListener("mouseout",()=>{
                cursor.classList.remove("show");                                //마우스 아웃하면 show 클래스 삭제
                follow.classList.remove("show");
            })
            //number에 마우스 오버
            document.querySelector(".number").addEventListener("mouseover",()=>{
                cursor.classList.add("show2");                                  //마우스 오버하면 show2 클래스 추가
                follow.classList.add("show2");
            });
            document.querySelector(".number").addEventListener("mouseout",()=>{
                cursor.classList.remove("show2");                               //마우스 아웃하면 show2 클래스 삭제
                follow.classList.remove("show2");
            })
            //소스보기에 마우스 오버
            document.querySelector(".source-btn").addEventListener("mouseover",()=>{
                cursor.classList.add("show2");                                      //마우스 오버하면 show2 클래스 추가
                follow.classList.add("show2");
            });
            document.querySelector(".source-btn").addEventListener("mouseout",()=>{
                cursor.classList.remove("show2");                                   //마우스 아웃하면 show2 클래스 삭제
                follow.classList.remove("show2");
            })
                      
            // 화면에 좌표값 출력
            document.querySelector(".pageX").innerText = e.pageX;
            document.querySelector(".pageY").innerText = e.pageY;
        });

 

이번 예제는 gsap 플러그인을 활용한 애니메이션으로 마우스 커서 이펙트를 작업했습니다.  핵심 메서드로는

mouseover, mouseout이 있습니다. 마우스 오버와 마우스 아웃 대신 mouseenter, mouseleave를 사용할 수 있습니다. 

mouseenter및 mouseover이벤트는 요소 위로 마우스를 이동하면 트리거됩니다 .

mouseenter는 마우스가 설정된 요소에 들어갈 때만 트리거됩니다. 상대 이벤트는 mouseleave 입니다.

mouseover는 마우스가 요소 또는 그 자식 중 하나에 들어갈 때 트리거됩니다 . 그것의 상대는 mouseout입니다.