MouseEffect - getBoundingClientRect

const circle = document.querySelector(".cursor").getBoundingClientRect(); 
        //bottom, height, left, right, rop, width, x, y
        //const circle {
        //     bottom: 0;
        //     height: 200,
        //     left: 0,
        //     width: 200
        // }


        function follow(e) {

            gsap.to(".cursor", {duration: .3, left:e.pageX - circle.width/2 , top:e.pageY - circle.height/2})
            
            //출력용
            document.querySelector(".pageX").innerText = e.pageX;
            document.querySelector(".pageY").innerText = e.pageY;

        }

        window.addEventListener("mousemove", follow);

/* cursor CSS효과 */
.cursor {
        position: absolute;
        left: 0px;
        right: 0px;
        width: 200px;
        height: 200px;
        z-index: -1;
        border-radius: 50%;
        background-image: url(img/imgbg08.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        border: 5px solid #fff;

    }

 

자바스크립트를 이용하여 마우스 효과(mouse effect)를 주는 사이트 입니다.

커서와 배경에 같은 이미지를 넣은 후 커서 CSS -> background-attachment 를 넣어 이미지를 고정하여 

커서가 움직이는 곳이 밝아지는 조명효과를 만들었습니다.

 

마우스 이펙트