마우스 이펙트03

Success is walking from failure to failure with no loss of enthusiasm.

성공이란 열정을 잃지 않고 실패에서 실패로 걸어가는 것이다.

소스 보기

Javascript_clientWidth

Javascript_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 - mouseCursor.clientWidth/2,
            top: e.pageY - mouseCursor.clientHeight/2
        })
    })
}

{
    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
        })
    })
}