Mouse Effect 05 - 이미지 효과2

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

        function mouseMove(e){
            // 마우스 좌표 값
            let mousePageX = e.pageX;
            let mousePageY = e.pageY;

            // 마우스 좌표 기준점을 가운데로 설정
            let centerPageX = window.innerWidth / 2 - mousePageX
            let centerPageY = window.innerHeight / 2 - mousePageY

            // 최소값 : -50, 최대값 : 50 으로 설정
            let maxPageX = Math.max(-300, Math.min(300, centerPageX));
            let maxPageY = Math.max(-300, Math.min(300, centerPageY));

            // 각도 줄이는 설정
            let anglepageX = maxPageX * 0.12
            let anglepageY = maxPageY * 0.12
            // 부드럽게 설정
            let softPageX = 0;
            let softPageY = 0;
            softPageX += (anglepageX - softPageX) * 0.6;
            softPageY += (anglepageY - softPageY) * 0.6;


            // 이미지 움직이기 transform: rotateX, rotateY
            const imgMove = document.querySelector(".mouse__img");
            imgMove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)"

            // 원 크기
            let circleWidth = mousePageX - circle.width/2;
            let circleHeight = mousePageY - circle.height/2

            // 커서
            gsap.to(".cursor", {duration: 0.3, left: circleWidth, top: circleHeight})
           
            // 출력
            document.querySelector(".mousePageX").textContent = mousePageX
            document.querySelector(".mousePageY").textContent = mousePageY
            document.querySelector(".centerPageX").textContent = centerPageX
            document.querySelector(".centerPageY").textContent = centerPageY
            document.querySelector(".maxPageX").textContent = maxPageX
            document.querySelector(".maxPageY").textContent = maxPageY
        }

        document.addEventListener("mousemove", mouseMove)

이미지 효과1번과 동일하게 우선 좌표의 기준값을 이미지 중앙으로 설정합니다.

Math.max / Math.min 을 이용하여 일정한 범위 내에 움직일 수 있게 최대값, 최소값을 잡아줬습니다.

 

그다음 perspective를 설정하여 바라보는 시점을 설정하여 좌표값에 따라 사진이 translate 되도록 설정하여

마우스를 따라 회전하는 것 처럼 연출하였습니다.

 

 

전체 사이트 보기