자바스크립트 마우스 효과 : 이미지 효과

자바스크립트 : 마우스 효과 : 이미지 효과

자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 커서가 나타나고, 커서의 위치에 따라 이미지가 확대됨과 동시에 이동하는 효과를 작업해 보도록 하겠습니다.

---

1. 선택자 만들기

const cursor = document.querySelector(".mouse__cursor");
const cursorRect = document.querySelector(".mouse__cursor").getBoundingClientRect();

커서에 대한 선택자를 먼저 만들어 줍니다. 두 번째 선택자는 마우스 효과 3번에서도 사용했던 속성으로, 너비와 높이 등을 객체로 한번에 출력할 수 있습니다.

2. 마우스 이벤트 만들기

document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {}

addEventListener로 마우스 이벤트를 만들어 줍니다. 이미지를 삽입한 figure 태그 내에 이벤트를 만들어 주었기 때문에, 이미지에 마우스를 오버해야만 커서가 변화합니다.
아래의 모든 소스는 마우스 이벤트 내에서 작업할 예정입니다.

2-1) 브라우저 기준 마우스 위치값 구하기

let mousePageX = e.pageX;
let mousePageY = e.pageY;
                        
gsap.to(cursor, {
    duration: 0.3,
    left: e.pageX - cursorRect.width / 2,
    top: e.pageY - cursorRect.height / 2,
});

우선, 실제 마우스의 위치값을 구합니다. pageX/pageY 속성은 문서의 왼쪽/위쪽 기준으로, 마우스 커서의 위치를 반환합니다.
GSAP로 마우스 위치에 따라 커서가 부드럽게 따라오도록 작업해 줍니다. 마우스의 위치는 실제 위치에서 너비, 높이값을 2로 나누어 빼 줌으로써 커서의 한가운데에 위치하도록 해 주었습니다.

2-2) 브라우저의 중앙 기준 마우스 위치값 구하기

1. window.innerWidth // 스크롤바 미포함, 유동적(브라우저 기준)
2. window.outerWidth // 스크롤바 포함, 유동적(브라우저 기준)
3. window.screen.width // 스크롤바 포함, 불변(모니터 기준)

이번에는 브라우저의 중앙을 기준으로 마우스의 위치값을 구해보겠습니다. 그러기 위해서는 화면에 보이는 브라우저의 너비, 높이를 구할 수 있어야 합니다. 브라우저의 너비를 구하는 방법에는 위 세 가지가 있습니다.
첫번째, innerWidth의 경우, 스크롤바를 포함하지 않고, 브라우저의 크기를 줄이면 작아진 브라우저 상태의 너비값을 반환합니다.
두번째, outerWidth의 경우, 스크롤바를 포함하고, 브라우저의 크기를 줄이면 작아진 상태의 브라우저 너비값을 반환합니다.
세번째, screen.width의 경우, 스크롤바를 포함하고, 브라우저의 크기를 줄여도 너비값이 변화하지 않습니다. 즉, 모니터 화면의 크기라고 할 수 있습니다.
이 사이트는 반응형이기 때문에 innerWidth를 사용하여 작업할 예정입니다.

let centerPageX = window.innerWidth / 2 - mousePageX;
let centerPageY = window.innerHeight / 2 - mousePageY;

브라우저의 너비, 높이값을 구했다면, 이제 브라우저의 중앙 기준 마우스 위치값을 구해봅시다.
전체 길이 / 2 - 마우스 좌표값을 구하면 됩니다.

2-3) Info 박스에 출력하기

// 브라우저 기준
document.querySelector(".mousePageX").textContent = mousePageX;
document.querySelector(".mousePageY").textContent = mousePageY;

// 가운데 기준
document.querySelector(".centerPageX").textContent = Math.ceil(centerPageX);
document.querySelector(".centerPageY").textContent = Math.ceil(centerPageY);

브라우저 기준, 브라우저 중앙 기준 마우스의 좌표값을 구했다면, 브라우저 좌측 하단에 위치한 Info 박스에 각각 친절하게 출력해 줍니다.

2-4) 커서 위치에 따라 이미지 효과 주기

const imgMove = document.querySelector(".mouse__wrap figure img");
// imgMove.style.transform = "translate(" + centerPageX / 20 + "px, " + centerPageY / 20 + "px)";

gsap.to(imgMove, {
    duration: 0.3,
    x: centerPageX / 20,
    y: centerPageY / 20,
});

마지막으로, 커서 위치에 따라 이미지가 움직이도록 효과를 주면 됩니다. 위의 방법처럼 자바스크립트 자체에서 효과를 줄 수도 있지만, 더 간단한 작업과 부드러운 움직임을 위하여 GSAP를 사용하였습니다. 나누기 20을 해준 이유는 이미지의 움직임 정도를 조절하기 위해서입니다.

---

결과

원본 소스 보기 원본 사이트 보기