MouseEffect - 마우스효과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(-800, Math.min(800, centerPageX));
            let maxPageY = Math.max(-300, Math.min(300, centerPageY));

            //각도 줄이는 설정
            let anlexpageX = maxPageX * 0.12;
            let anlexpageY = maxPageY * 0.12;

            //부드럽게 설정
            let softPageX =0;
            let softPageY =0;
            softPageX += (anlexpageX - softPageX) * 0.4;
            softPageY += (anlexpageY - softPageY) * 0.4;
        
            //이미지 움직이기
            //transform: rotateX(0deg) rotateY(0deg);
            const imgMove = document.querySelector(".mouse__img");
            imgMove.style.transform = "perspective(600px) rotateX("+ softPageX+"deg) rotateY("+ -softPageY+"deg)";


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

            //커서
            gsap.to(".cursor", {duration: .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);

자바스크립트를 이용하여 마우스 효과(mouse effect)를 주는 사이트 입니다.

이미지위에서 커서를 움직이면 커서 움직임에 따라 이미지가 3D효과로 움직이도록 만들었습니다.

커서가 움직일때 커서의 좌표값이 브라우저의 중앙에 위치하도록 해줍니다.

그 후에 Math.max / Math.min를 사용하여 최소값 최대값을 설정하여 그 범위 안에서 이미지가 움직이게 합니다.

그후에 perspective 와 translate 를 설정하여 3D효과로 움직이도록 했습니다.

 

마우스 이펙트