16. Mouse Move Shadow ( JavaScript30 )

Dev/JavaScript30

16. Mouse Move Shadow ( JavaScript30 )

takeU 2021. 7. 9. 13:51

Mouse Move Shadow

목표

마우스 움직임에 따라 텍스트에 효과가 적용돼 움직이도록 해보려 함

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
</head>
<body>

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

CSS코드는 뺐음

과정

함수 생성을 위한 상수 생성
그림자를 만드는 함수 생성 및 좌표값 기준 설정
마우스 이동시 그림자의 위치, 색상 설정
함수 호출

코드 분석

1. 함수 생성을 위한 상수 생성

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; // 100px

hero에 클래스가 hero인 요소를 담고, text에 hero중 h1태그를 담고 walk에 500을 담음

2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정

const shadow = e => {
 const { offsetWidth: width, offsetHeight: height } = hero;
 let { offsetX: x, offsetY: y } = e;

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

가장 위에 선언된 상수는 아래 두줄을 한줄로 합친것과 같다

const { offsetWidth: width, offsetHeight: height} = hero
// same
const width = hero.offsetWidth
const height = hero.offsetHeight

width에 hero의 가로길이, height에 hero의 세로길이를 담고(border까지의 길이)
x,y에 현재 요소를 기준으로 마우스 위치의 절대좌표를 담는다
조건문의 조건을 해석해보면 현재 마우스의 위치가 <div class="hero">안의 h1태그 위에 있을때 참임을 반환한다는 뜻이고 이때 x,y값을 뷰포트를 기준으로 값이 나올 수 있도록 재 설정해준다는 의미이다.
즉 마우스가 h1태그 위에 있던 없던간에 좌표값(x,y)은 전체 뷰포트를 기준으로 찍힌다.

3. 마우스 이동시 그림자의 위치, 색상 설정

 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 rgba(255,0,255,0.7),
   ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
   ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
   ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
 `;
}

xWalk와 yWalk의 좌표값 기준을 -250에서 250으로 변경해주고
그림자의 방향을 각각 설정해 총 4개의 그림자가 나오도록 설정해줌

4. 함수 호출

 hero.addEventListener('mousemove', shadow);

마우스가 움직이면 shadow 함수를 실행

찾아본 내용, 알게된 내용들

contenteditable - 컨텐츠를 수정할 수 있게 해주는 속성

저작자표시 비영리 변경금지

현재글16. Mouse Move Shadow ( JavaScript30 )

takeU