Mouse Effect - 조명 효과

 

설명

조명 효과의 원리는 쉽게 말해서 사실 CSS로 착시효과를 통해 눈속임을 하는 것 입니다.
배경에 그림을 넣고 그 위에 어두운 계열의 불투명한 판을 올려놓고 마우스 커서에게 배경 그림과 같은 그림을 넣어주면
마치 마우스를 조명이 비추는 듯한 느낌을 표현할 수 있습니다.

<script>
const circle3 = document.querySelector(".cursor").getBoundingClientRect();
//bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0
console.log(circle3)
    
//백그라운드와 마우스 커서의 이미지를 동일하게 한뒤에 백그라운드 포지션 어태치먼트 픽스드로 착시효과를 주는것

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

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

}
window.addEventListener("mousemove", follow)
</script>