안녕하세요!

Derek 입니다. :)

벌써 반을 넘어 16번째 게시물이라, 어서 빨리 끝내버리고 싶은 마음 뿐입니다 ;)
이 시리즈와 이미 끝난 racing car 프로젝트도 연재해야하는데 바쁘네요!

일단 오늘 Day 16 project 시작해보겠습니다. 🤭

16. Mouse Move Shadow

목표

마우스의 위치에 따라 텍스트의 그림자가 움직이도록 구현한다.

보이는 기능에 비해서는 난도가 조금은 있었던 것 같아요. 수학적인.. 지식이 필요해요.

먼저 HTML 의 구조는 다음과 같습니다. 아주 간단해요!

<div class="hero">
  <h1 contenteditable>🔥WOAH!</h1>
</div>

시작해볼게요.

Derek 과 Wes Bos의 구현코드

const hero = document.querySelector(".hero");
const text = hero.querySelector("h1");

const WALK = 100;

hero.addEventListener("mousemove", shadow);

const shadow = (e) => {
  const width = hero.offsetWidth;
  const height = hero.offsetHeight;
  // this can be one line : const {offsetWidth: width, offsetHeight: height} = hero;

  let x = e.offsetX;
  let y = e.offsetY;
  // this can be one line : let {offsetX : x, offsetY: y} = e;

  if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

  const xWalk = Math.round((x / width * WALK) - (WALK / 2));
  const yWalk = Math.round((y / height * WALK) - (WALK / 2));

  text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;

}

함수가 한 가지밖에 없어서 심적으로 부담은 되진 않았어요. 차근차근 볼게요!

01. 그림자 생성 함수

그림자 생성함수는 마우스 움직임에 따라 생성됩니다.

const hero = document.querySelector(".hero");
const text = hero.querySelector("h1");

hero.addEventListener("mousemove", shadow);

h1 을 감싸고 있는 div 에 대해서 이벤트를 등록했습니다.


등록한 함수는,

const WALK = 100;

const shadow = (e) => {
  const width = hero.offsetWidth;
  const height = hero.offsetHeight;

  let x = e.offsetX;
  let y = e.offsetY;

  if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

  const xWalk = Math.round((x / width * WALK) - (WALK / 2));
  const yWalk = Math.round((y / height * WALK) - (WALK / 2));

  text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;
}

위와 같은데요, 먼저 hero 에 대한 가로 세로 정보를 width 와 height 에 저장합니다.

참고로, 해당 구문은 다음과 같이 줄일 수 있습니다.

const {offsetWidth: width, offsetHeight: height} = hero;

아래에 x 와 y 도 한줄로 줄일 수 있어요.

let {offsetX : x, offsetY: y} = e;

이렇게 줄이는 법을 특정한 이름으로 부르는지는 잘 모르겠네요 😅 아시는 분 계시면 댓글로 부탁드립니다 :)

if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

이벤트가 일어나는 element가 hero 가 아닌 h1 태그에도 해당이 되기 때문에, 저희가 원하는 e.target 에 대해서만 가로와 세로의 길이를 구해야 하기 때문에 필요한 제어구문입니다.

그 후에 나오는 xWalk 와 yWalk 변수는 가운데를 중심으로 좌측 상단을 (-50, -50) 으로, 우측 하단을 (50, 50) 으로 만들기 위해서 필요한 수학적인 식입니다.

사실 딱 이해가 되진 않네요.. 그냥 어거지로 이해한 상태입니다..!

text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;

그렇게 해서 간단하게, text.style.textShadow 의 속성값을 백틱으로 조정하는 모습입니다.

수학적인 부분이 딱 깔끔하게 설명이 되지 않은 것 같네요. 아무리 봐도 도통 모르겠네요.
이해가 가시는 고수님들 기다립니다..!

틀린내용이나 수정할 내용이 있다면 언제든지 피드백 부탁드립니다!
감사합니다!🤗