Mouse Effect 03 - 조명 효과

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값
        
        function follow(e){

            gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)});

            //출력용
            document.querySelector(".pageX").innerText = e.pageX;
            document.querySelector(".pageY").innerText = e.pageY;
        }

        window.addEventListener("mousemove", follow);

전체 사이트 보기

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

커서에 이미지를 넣어서 배경을 보이게 하는것 처럼 연출하였습니다.

스크립트보단 css적으로 처리해야될 요소들이 있습니다.

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

커서 자체에 backgroun-image를 이용하여 배경과 같은 이미지를 설정하고

background-attachment 를 이용하여 고정시킵니다.

 

커서 위치에 맞게 이미지를 따라다니게 만들어 마치 조명을 비춘 것 처럼 표현하였습니다.