자바스크립트 마우스 효과 : 조명 효과

자바스크립트 : 마우스 효과 : 조명 효과

자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 조명 효과를 작업해 보도록 하겠습니다. 조명 효과는 배경 이미지 위에 마우스를 올리면, 이미지가 선명하게 보이도록 하는 효과입니다.

---

1. CSS 소스

1-1) cursor 만들기

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    background-image: url(../assets/img/effect_bg15@2x-min.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    border: 5px solid #fff;
}

마우스 커서의 너비, 높이, 모양을 지정해 주고, 백그라운드 방식으로 이미지를 삽입해 줍니다. 배경(body)에도 같은 이미지를 삽입해 줍니다.

2. JAVASCRIPT 소스

2-1) 커서 선택자 만들기

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

커서에 대한 선택자를 먼저 만들어 줍니다.

2-2) 커서의 너비, 높이값을 구하는 선택자 만들기 : offsetWidth, offsetHeight / clientWidth, clientHeight의 차이

// const circle1 = cursor.offsetWidth; // 200
// const circle2 = cursor.clientWidth; // 190

const circleW = cursor.offsetWidth;
const circleH = cursor.offsetHeight;

너비, 높이값을 구하는 방법에는 두 가지가 있습니다. offsetWidth, offsetHeight / clientWidth, clientHeight가 그것입니다. 그 차이는 보더값 포함 유무에 있습니다.
console.log를 통해 확인해 보면, 전자인 offsetWidth의 경우, 보더의 값을 포함하지 않아, 커서의 width값인 200을 그대로 출력합니다. 보더를 5px 설정해 주었기 때문에, 후자인 clientWidth의 경우, 총 10px(5px * 2)의 값이 줄어들어 190을 출력하게 됩니다.
여기에서는 커서의 width값을 그대로 사용할 것이기 때문에, offset 속성이 더 적합합니다.

2-3) 커서의 너비, 높이값을 구하는 선택자 만들기 : getBoundingClientRect()

const circle = cursor.getBoundingClientRect();
// DOMRect {x: 0, y: 0, width: 200, height: 200, top: 0, …}

2-2의 방법을 사용할 수도 있지만, getBoundingClientRect()을 사용하여 더 간단히 작업할 수도 있습니다. console.log로 값을 확인해 보면, cursor의 x, y, width, height 등의 값이 객체로 한번에 나타나는 것을 알 수 있습니다.

2-3) 마우스 이벤트 만들어 주기

window.addEventListener("mousemove", (e) => {
    gsap.to(cursor, {
        duration: 0.5,
        left: e.pageX - circle.width / 2,
        top: e.pageY - circle.height / 2,
    });
});

지금까지 작업한 값들로 마우스 이벤트를 만들어 주면 완성입니다. 이번에도 gsap를 이용해 부드러운 움직임 효과를 주었습니다. getBoundingClientRect()를 사용했기 때문에 객체 데이터를 불러오는 방식으로 너비, 높이값을 입력하고, 실제 커서가 중간에 위치할 수 있게끔 나누기 2를 해주면 됩니다.

---

결과

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