자바스크립트 마우스 효과 : 기울기 효과 / 반전 효과

자바스크립트 : 마우스 효과 : 기울기 효과 / 반전 효과

자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 이미지가 기울어지고, 색상이 반전되는 효과가 나타나도록 작업해 주었습니다. 이펙트에 영향을 주는 주요 CSS 소스부터 먼저 살펴보도록 하겠습니다.

---

1. CSS 소스

1-1) 이미지

.mouse__img {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
    transition: all 0.3s;
}

마우스를 오버했을 때, 움직일 이미지에 transform 속성을 부여해 줍니다. perspective 속성은 원근감을 부여합니다. css로 3D 효과를 주기 위해서 가장 중요한 속성입니다.
우리는 3D 작업을 할 것이기 때문에, transform-style: preserve-3d; 속성으로 3D 사용을 선언해 줍니다.
그와 비슷하게, 아래의 will-change: transform; 속성은 transform을 사용할 것임을 브라우저에게 미리 선언하는 것입니다. 겉으로 나타나는 효과는 미미하지만, 부드러운 작업을 할 수 있습니다.

1-2) 마우스 커서

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    z-index: 999;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: difference;
}

주목할 점은 가장 아래에 있는 mix-blend-mode: difference; 속성입니다. 이 속성은 서로 다른 요소를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용합니다. 즉, 이미지에 마우스를 오버했을 때, 반전 효과가 나타나게 됩니다.

2. JAVASCRIPT 소스

2-1) mouseMove 이벤트 만들어 주기

const mouseMove = (e) => {};
window.addEventListener("mousemove", mouseMove);

addEventListener로 마우스가 움직일 때의 이벤트를 먼저 만들어 줍니다. 아래에서 작업할 모든 소스들은, 모두 해당 이벤트 안에서 이루어질 것입니다.

2-2) 마우스 커서의 좌표값 구하기

// 마우스 좌표값(브라우저 기준)
let mousePageX = e.pageX;
let mousePageY = e.pageY;

// 커서 움직이기
gsap.to(".mouse__cursor", {
    duration: 0.3,
    left: mousePageX - 50,
    top: mousePageY - 50,
});

pageX, pageY를 이용하여 브라우저 기준 마우스 좌표값을 구해줍니다.
그 다음, gsap를 사용하여 부드럽게 커서를 움직여 줍니다. 50을 빼주는 이유는 마우스 커서의 너비, 높이가 100px이기 때문입니다. 실제 커서의 위치를 가운데로 작업해주기 위함입니다.

// 마우스 좌표값(중앙 기준)
let centerPageX = window.innerWidth / 2 - mousePageX;
let centerPageY = window.innerHeight / 2 - mousePageY;

브라우저의 중앙 기준 마우스 위치값도 구해줍니다. 2-2에서 구한 좌표값과는 별개로, 이미지가 움직일 때 사용되는 값입니다.
이 값을 바로 적용할 수도 있지만, 아직은 값이 커서 이미지가 과하게 움직일 것입니다. 그러므로 값을 줄여주고, 최대ㆍ최소값을 지정하는 작업이 필요합니다.

2-3) 세부 작업하기

// 최소값은 -100, 최대값은 100 설정
let maxPageX = Math.max(-100, Math.min(100, centerPageX));
let maxPageY = Math.max(-100, Math.min(100, centerPageY));

Math.max 함수는 입력값으로 받은 숫자 중 가장 큰 숫자를 반환합니다. 반대로 Math.min 함수는 가장 작은 숫자를 반환합니다.
즉, Math.min(100, centerPageX)에서, centerPageX가 100보다 커지면 함수는 100의 값을 반환할 것입니다. 이후, Math.max(-100, 100)에서, 100을 반환하게 되므로, 최대값은 자연스럽게 100으로 설정됩니다.
한편, Math.min(100, centerPageX)에서, centerPageX가 100보다 작으면 함수는 centerPageX의 값을 반환할 것입니다. 이후, Math.max(-100, centerPageX)에서, centerPageX의 값을 반환하게 되고, 값이 더 작아지면 -100의 값을 반환할 것입니다. 자연스럽게 최소값은 -100으로 설정됩니다.

// 각도 줄이기
let anglePageX = maxPageX * 0.1;
let anglePageY = maxPageY * 0.1;
    
// 부드러운 설정
let softPageX = 0,
    softPageY = 0;
softPageX += (anglePageX - softPageX) * 0.4;
softPageY += (anglePageY - softPageY) * 0.4;

maxPageX, maxPageY를 구했지만, 아직도 움직임이 클 것입니다. 따라서 0.1씩 곱해주었습니다.
또, 움직임을 더 부드럽게 작업해 주기 위해 softPage 변수를 만들어 주었습니다. anglePage와 softPage의 값은 0으로 같지만, 오차는 발생합니다.

2-4) 이미지 움직이기

const imgMove = document.querySelector(".mouse__img");
imgMove.style.transform = "perspective(600px) rotateX(" + softPageX + "deg) rotateY(" + softPageY + "deg)";

이제 이미지에 움직임 효과를 주면 모든 작업이 끝납니다.

---

결과

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