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. 함수 생성을 위한 상수 생성
  2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정
  3. 마우스 이동시 그림자의 위치, 색상 설정
  4. 함수 호출

코드 분석

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

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

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

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

    function 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
    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)
     `;
    }
    

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

  4. 함수 호출

     hero.addEventListener('mousemove', shadow);
    

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

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

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

'개발 > JavaScript30' 카테고리의 다른 글

18. Adding Up Times with Reduce  (0) 2017.04.16
17. Sort Without Articles  (0) 2017.04.13
16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12

+ Recent posts