Mouse Effcet 05. 이미지 효과 2 / Math.max(), Math.min()

//설명. 참고사항.
//커서의 길이값 속성들을 객체 데이터로 불러오기
        const circle = document.querySelector(".cursor").getBoundingClientRect();

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

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

            //좌표의 최대값  최소값  구하기
            //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정.
            //max 값에 Math.min을 한번 더 사용해서  centerPage의 값이 아무리 커져도 Math.min의 최소값이 나오도록 설정.
            let maxPageX = Math.max(-800, Math.min(800, 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.4;
            softPageY += (anglePageY -softPageY) *0.4;

            //이미지 움직이기
            //transform:  rotateX(0deg) rotateY(0deg);
            const imgMove = document.querySelector(".mouse__img");
            imgMove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)";    //rotate 스타일 속성값을 centerPage 좌표값 변수로 지정해서 마우스 움직이면 위치가 움직이게.

            //원 반지름 크기 가로세로
            let circleWidth = mousePageX - circle.width/2;
            let circleHeight = mousePageY - circle.height/2;

            //커서
            gsap.to(".cursor",{duration: .3, left:circleWidth, top: circleHeight}); //gsap로 마우스 움직이는 애니메이션 설정.

            //좌표값 좌하단에 출력
            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);

 

 

이번 예제는 이미지 효과 2 입니다. 

마우스를 움직이면 가운데의 이미지가 마치 3D 처럼 보이게 작업했습니다. 

움직이는 마우스 좌표값을 설정하지 않으면 이미지가 계속 빠르게 돌아가서  가운데 이미지의 마우스 좌표값의 최대, 최소 값을 설정합니다. 

이 과정에서 

//좌표의 최대값  최소값  구하기

            //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정.

            //max 값에 Math.min을 한번 더 사용해서  centerPage의 값이 아무리 커져도 Math.min의 최소값이 나오도록 설정.

            let maxPageX = Math.max(-800, Math.min(800, 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.4;

            softPageY += (anglePageY -softPageY) *0.4;

 

이런 스크립트를 사용합니다. 

 

0.12 와 0.4 같은 값을 임의로 변경하면 부드럽게 움직이는 효과를 바꿀 수 있습니다. 

 

이번 예제에서의 핵심 메서드 최대, 최소 값을 구하는 수학 메서드 입니다. 

• 수학 메서드 : Math.max() : 가장 큰 값을 반환 : 반환(숫자)
•  수학 메서드 : Math.min() : 가장 작은 값을 반환 : 반환(숫자) 

수학 객체 메서드 참고 :https://gwni0214.github.io/webs_class/javascript/javascript07.html

자바스크립트