Mouse Effcet 01. 마우스 따라다니기

//설명. 참고사항.

  //출력용
        window.addEventListener("mousemove",(event)=>{
            document.querySelector(".clientX").innerText = event.clientX;   //브라우저 기준 x좌표
            document.querySelector(".clientY").innerText = event.clientY;   //브라우저 기준 y좌표
            document.querySelector(".offsetX").innerText = event.offsetX;   //요소 기준 x 좌표
            document.querySelector(".offsetY").innerText = event.offsetY;   //요소 기준 y 좌표
            document.querySelector(".pageX").innerText = event.pageX;       //페이지 기준 x 좌표
            document.querySelector(".pageY").innerText = event.pageY;       //페이지 기준 y 좌표
            document.querySelector(".screenX").innerText = event.screenX;   //디바이스 기준 x 좌표
            document.querySelector(".screenY").innerText = event.screenY;   //디바이스 기준 y 좌표
        })
        //마우스 움직이기
        window.addEventListener("mousemove",(e)=>{
            document.querySelector(".cursor").style.left = e.clientX - 25 + "px";   //원 안으로 중심이 들어가야해서 -25px 을 줌.
            document.querySelector(".cursor").style.top = e.clientY - 25 + "px";
        })
        //마우스 오버 효과    
        const mouseStyle = document.querySelectorAll(".mouse__wrap span");     //모든 span 태그를 변수로 지정       
        //for               
        // for(let i =0; i<mouseStyle.length; i++){
        //     mouseStyle[i].addEventListener("mouseover",()=>{
        //     document.querySelector(".cursor").classList.add("style"+(i+1));
        //     });
        //     mouseStyle[i].addEventListener("mouseout",()=>{
        //     document.querySelector(".cursor").classList.remove("style"+(i+1));
        //     });
        // };
        
        //forEach
        mouseStyle.forEach((e,i)=>{
            e.addEventListener("mouseover",()=>{                                //마우스 오버 효과를 index 순서에 따라 각각 적용. 
                document.querySelector(".cursor").classList.add("style"+(i+1)); // 스타일 클래스를 추가
            });
            e.addEventListener("mouseout",()=>{                                 //마우스 아웃을 하면
            document.querySelector(".cursor").classList.remove("style"+(i+1));  //스타일 클래스 삭제
            });
        });

 

이번에는 마우스가 따라다니는 이펙트 예제입니다.

현재 마우스의 좌표값을 파악 후 window 이벤트 메서드를 이용해서 작업합니다.

CSS 애니메이션에서 다양한 효과를 이용해서 dashed 된 span에 마우스가 오버되면 클래스가 추가, 삭제 되도록 작업합니다.