01. 마우스 이펙트 - 마우스 따라다니기

마우스가 따라다니는 효과입니다.

  • javascript
  • {
        window.addEventListener("mousemove", (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;
        })
    
        // 선택자
        const mouseCursor = document.querySelector(".mouse__cursor");
    
        // 마우스 좌표 값을 커서 할당
        window.addEventListener("mousemove", (e) => {
            mouseCursor.style.left = e.clientX - 25 + "px";
            mouseCursor.style.top = e.clientY - 25 + "px";
        })
    
        // for문
        // for(let i=1; i<=8; i++){
        //     document.querySelector(".s"+i).addEventListener("mouseover", () => {
        //     mouseCursor.classList.add("s"+i);
        //     })
        //     document.querySelector(".s"+i).addEventListener("mouseout", () => {
        //         mouseCursor.classList.remove("s"+i);
        //     })
        // }
    
        // forEach문
        document.querySelectorAll(".mouse__text span").forEach((span, num) => {
            span.addEventListener("mouseover", () => {
                mouseCursor.classList.add("s" + (num + 1));
            });
            span.addEventListener("mouseout", () => {
                mouseCursor.classList.remove("s" + (num + 1));
            });
        });
    }
확인하기

>02.마우스 이펙트 - 마우스 따라다니기(GSAP)

GSAP를 이용한 마우스 따라다니는 효과입니다..

  • javascript
  • {
        // 선택자
        const mouseCursor = document.querySelector(".mouse__cursor");
        const mouseCursor2 = document.querySelector(".mouse__cursor2");
    
        window.addEventListener("mousemove", (e) => {
            mouseCursor.style.left = e.pageX + "px";
            mouseCursor.style.top = e.pageY + "px";
            mouseCursor2.style.left = e.pageX + "px";
            mouseCursor2.style.top = e.pageY + "px";
        });
    
        document.querySelectorAll(".mouse__text span").forEach(span => {
            span.addEventListener("mouseenter", () => {
                mouseCursor.classList.add("active");
                mouseCursor2.classList.add("active");
            })
            span.addEventListener("mouseleave", () => {
                mouseCursor.classList.remove("active");
                mouseCursor2.classList.remove("active");
            })
        })
    }
  • gsap
  • {
        // 선택자
        const mouseCursor = document.querySelector(".mouse__cursor");
        const mouseCursor2 = document.querySelector(".mouse__cursor2");
    
        window.addEventListener("mousemove", (e) => {
            gsap.to(mouseCursor, {duration: 0.3, left: e.pageX-5, top: e.pageY-5});
            gsap.to(mouseCursor2, {duration: 0.8, left: e.pageX-20, top: e.pageY-20});
        });
    
        document.querySelectorAll(".mouse__text span").forEach(span => {
            span.addEventListener("mouseenter", () => {
                mouseCursor.classList.add("active");
                mouseCursor2.classList.add("active");
            })
            span.addEventListener("mouseleave", () => {
                mouseCursor.classList.remove("active");
                mouseCursor2.classList.remove("active");
            })
        })
    }
확인하기

03. 마우스 이펙트 - 돋보기 효과

마우스 돋보기 효과입니다.

  • JAVASCRIPT_CLIENTWIDTH
  • {
        const mouseCursor = document.querySelector(".mouse__cursor");
        const rect = mouseCursor.getBoundingClientRect();
    
        window.addEventListener("mousemove", e => {
            gsap.to(".mouse__cursor", {
                duration: 0.5,
                left: e.pageX - mouseCursor.clientWidth/2,
                top: e.pageY - mouseCursor.clientHeight/2
            })
        })
    }
  • AVASCRIPT_GETBOUNDINGCLIENTRECT
  • {
        const mouseCursor = document.querySelector(".mouse__cursor");
        const rect = mouseCursor.getBoundingClientRect();
    
        window.addEventListener("mousemove", e => {
            gsap.to(".mouse__cursor", {
                duration: 0.5,
                left: e.pageX - rect.width/2,
                top: e.pageY - rect.height/2
            })
        })
    }
확인하기