Mouse Effect - 이미지 효과

 

설명

마우스 이펙트 이미지 효과는 마우스를 따라서 이미지가 움직이는 효과 입니다.
이 효과를 내기 위해서는 먼저 마우스의 좌표값을 중앙으로 초기화 시킨 후(x축:0, y축:0) 중앙을 기준으로 이미지가 움직이게 됩니다.

마우스 좌표값 초기화 방법

마우스 좌표값을 중앙으로 초기화 방법은 화면 전체 가로값 - (화면 전체 가로값/2) 를 하시면 됩니다.

//실제 마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;

//마우스 좌표 값을 가운데로 초기화 후 좌표값
//전체 길이/2 - 마우스 x좌표값 == 0
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;

Javascript Code

<script>
const circle = document.querySelector(".cursor").getBoundingClientRect();

document.querySelector(".mouse__img").addEventListener("mousemove", (e) => {

	//커서(마우스를 따라다니는 원)
    gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2})
    
    //마우스 좌표 값
    let mousePageX = e.pageX;
    let mousePageY = e.pageY;
    
    //마우스 좌표 값을 가운데로 초기화
    //전체 길이/2 - 마우스 x좌표값 == 0
    let centerPageX = window.innerWidth/2 - mousePageX;
    let centerPageY = window.innerHeight/2 - mousePageY;

	//이미지 움직이기
    // const imgMove = document.querySelector(".mouse__img figure img")
    // imgMove.style.transform = "translate("+ centerPageX/20 +"px, "+ centerPageY/20 +"px)";
    gsap.to(".mouse__img figure img", {duration: 0.3, x:centerPageX/20, y:centerPageY/20})

	//출력
    document.querySelector(".mousePageX").textContent = mousePageX;
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
})
</script>