16 - Mouse Move Shadow

개요

 

마우스의 움직임에 연동하여 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 를 변경시켜 준다.