티스토리 뷰

javascript30

16 - Mouse Move Shadow

fistful 2019. 3. 26. 16:00
반응형

개요

 

마우스의 움직임에 연동하여 Text Shadow 변하게 구현해보자

 

내용

 

Element    contenteditable 넣어주면

input 이나 textarea 태그와 마찬가지로 편집이 가능하게 된다.


 

1) hero 아래의 style 따라 전체 윈도우 화면을 차지하게 된다.

 

2) text 글자가 있는 <h1> 태그를 가리키게 되고

walk 그림자가 떨어지는 비율과 관련이 있다.

 

3) 전체 윈도우를 커버하는 hero mousemove event 발생하면 shadow 함수를 호출한다.

 

shadow(e) 함수

 

1) hero.offsetWidth, hero.offsetHeight 각각 width, height 할당해준다.

마찬가지로 e.offsetX, e.offsetY 각각 x, y 할당해준다. 개인적으로는 직관적이지 않은 코드이다.

 

2) hero 아닌 text 상에서 마우스가 움직일 경우 x y 값이 h1 안에서의 상대값이 되는 문제가 있다.

- 이때, this !== e.target , 이벤트를 받는 주체인 hero !== text 경우에

- x, y 값을 hero 입장의 절대값으로 바꿔준다.

 

3) xWalk, yWalk 개념은 대략

- x / width, y / height 0 to 1 값이 된다.

- 여기에  walk 곱해주면 0에서 최대 walk 까지 x, y 값이 떨어질 있고,

- 글자가 벗어나지 않도록 적당히 (walk / 2) 만큼을 빼주었다.

 

4) 마지막으로 text.style.textShadow 변경시켜 준다. 


반응형

'javascript30' 카테고리의 다른 글

18 - Adding Up Times with Reduce  (0) 2019.03.28
17 - Sort Without Articles  (0) 2019.03.27
16 - Mouse Move Shadow  (0) 2019.03.26
15 - Local Storage  (0) 2019.03.26
14 - JavaScript References VS Copying  (0) 2019.03.19
13 - Slide in on Scroll  (0) 2019.03.18
댓글
댓글쓰기 폼