Mouse Effect 01 - 따라다니기

    window.addEventListener("mousemove", (e)=>{
    document.querySelector(".clientX").innerText = e.clientX		// 브라우저 기준 좌표값
    document.querySelector(".clientY").innerText = e.clientY
    document.querySelector(".offsetX").innerText = e.offsetX		// 요소 기준 좌표값
    document.querySelector(".offsetY").innerText = e.offsetY
    document.querySelector(".pageX").innerText = e.pageX		// 페이지 기준 좌표값
    document.querySelector(".pageY").innerText = e.pageY
    document.querySelector(".screenX").innerText = e.screenX		// 디바이스 기준 좌표값
    document.querySelector(".screenY").innerText = e.screenY
    
    })

    // 마우스 움직이기
    window.addEventListener("mousemove", (e) => {
    // document.querySelector(".cursor").style.left = e.clientX -25 + "px"		
    // document.querySelector(".cursor").style.top = e.clientY -25 + "px"

    let x = e.clientX -25 + "px"		// 커서 중앙으로 오게하기 위해 커서의 크기 절반만큼 위치값 조정
    let y = e.clientY -25 + "px"
    document.querySelector(".cursor").style.cssText = "left:" + x + "; top:" + y	// 커서 좌표값 표시
});

    // 마우스 효과

    // for()
    // for(let i=1; i<=6; i++){
    //     document.querySelector(".style"+i).addEventListener("mouseover", ()=>{
    //         document.querySelector(".cursor").classList.add("style"+i);
    //     })
    //     document.querySelector(".style"+i).addEventListener("mouseout", ()=>{
    //         document.querySelector(".cursor").classList.remove("style"+i);
    //     })
    // }

    // forEach()
    // document.querySelectorAll(".mouse__wrap span").forEach((span, index) => {
    //     span.addEventListener("mouseover", ()=>{
    //         document.querySelector(".cursor").classList.add("style"+(index+1));
    //     })
    //     span.addEventListener("mouseout", ()=>{
    //         document.querySelector(".cursor").classList.remove("style"+(index+1));
    //     })
    // })

    document.querySelectorAll(".mouse__wrap span").forEach(span => {	// span처리된 글자들
        let attr = span.getAttribute("class");						// 그 class값을 attr에 저장

        span.addEventListener("mouseover", () => {					// span처리된 글자들에 mouseover했을 때
            document.querySelector(".cursor").classList.add(attr);		// 커서에 저장된 class값 추가/삭제
        });
        span.addEventListener("mouseout", () => {					
            document.querySelector(".cursor").classList.remove(attr);
        })
    })

전체 사이트 보기

자바스크립트로 마우스 효과(mouse effect)를 주는 예제입니다.

.clientX / .clientY 등으로 좌표 값들을 불러올 수 있고, 해당 글자에 마우스를 오버했을 때

.getAttribute() 속성을 이용하여 해당 속성값을 불러오는 방법을 이용하였습니다.