Mouse Effect 04 - 이미지 효과

const circle3 = document.querySelector(".cursor").getBoundingClientRect();

    document.querySelector(".mouse__img").addEventListener("mousemove", (e) => {
            
        gsap.to(".cursor", {duration: 0.2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2})
        
        // 마우스 좌표 값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;

        // 마우스 좌표 값 기준점을 가운데로 초기화
        // 전체 길이 / 2 - 마우스 X 좌표값 
        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;
    })

이미지에 커서를 올리면 커서를 따라 이미지가 움직이도록 표현했습니다.

이미지의 크기를 늘리고 이미지가 보여지는 공간은 고정시킵니다.

 

그 뒤에 마우스에 위치에 따라 이미지가 움직이도록 설정합니다.

 

그러기 위해 기준점을 이미지 중앙으로 바꾸어야 합니다.

.innerWidth / .innerHeight 값을 이용하여 화면 전체의 위치값을 구하고

(전체 좌표 / 2 ) = 기준점으로 잡으면 화면 중앙에 와있을 때 좌표값이 0,0 이 됩니다.

 

그 뒤에 css적인 부분 처리를 하면 완성입니다.

 

전체 사이트 보기