MouseEffect - 마우스효과

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


            //마우스 좌표 값을 가운데 초기화
            //전체 가로
            //window.innerWidth - 브라우저 크기
            //window.outerWidth - 브라우저 크기
            //window.screen.Width - 화면크기
            //window.screen.Height - 화면크기

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

            let windowWidth = window.outerWidth;

            //이미지 움직이기
            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: -.3, x: centerPageX/20, y: centerPageY/20});

            //출력
            // document.querySelector(".pageX").textContent = centerPageX;
            // document.querySelector(".pageY").textContent = centerPageY;
            document.querySelector(".mousePageX").textContent = mousePageX;
            document.querySelector(".mousePageY").textContent = mousePageY;
            document.querySelector(".centerPageX").textContent = centerPageX;
            document.querySelector(".centerPageY").textContent = centerPageY;
        })

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

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

이미지를 올린후 이미지가 보여지는 부분을 사이즈를 줄인후 고정시킵니다.

그 후에 스크립트로 마우스 위치에 따라 이미지가 움직이도록 설정해줍니다.

커서가 움직일때 기준점이 이미지의 중앙에 있어야 합니다.

let centerPageX = window.innerWidth/2 - mousePageX;

let centerPageY = window.innerHeight/2 - mousePageY

을 사용하여 기준점을 이미지 중앙에 위치하도록 해줘 기준점이 이미지 중앙에서 움직일수 있도록해줍니다.

 

마우스 이펙트