-
인터렉티브 강의에서 배운 내용을 응용한 예제! (야호)
See the Pen Text transform with the mousemove event by NY KIM (@nykim_) on CodePen.
그라데이션으로 빛 효과를 만들고 background-position을 움직여 반사되는 느낌을 내봤다.
이때 그라데이션이 깔끔하게 잘리려면 background-clip:text 처리를 해야하는데, 그러기 위해서는 잘라낼 기준이 될 텍스트가 필요했다....
그래서 어쩔 수 없이 data-text를 넣는 걸로 처리해부려따.
(더 좋은 방법을 발견하면 알려줘 미래의 나!!!!)
++
이건 이미지 때문에 코드펜에 올리지는 못했지만, 이런 식으로 그림자를 처리할 수도 있겠더라!
그림자가 될 회색의 블러처리 된 이미지를 활용하면 된다 ;9
여기에 위의 마우스이벤트를 걸면, 마우스 위치에 따라 그림자 방향이 슈슈슉 바뀐다.
흰색 텍스트 이미지 + 회색 블러 이미지를 교묘하게 배치하면... 
이런 그림자 놀이가 가능해진다! ㅇ>-< 이처럼 마우스무브 이벤트를 통해, 다양한 응용이 가능할 것 같다 ( ´ ▽ ` )ﾉ
'Study > JavaScript' 카테고리의 다른 글
[Inside JS] 2. 함수와 프로토타입 체이닝 (0) 2019.09.10 [Inside JS] 1. 자바스크립트 데이터 타입과 연산자 (0) 2019.09.05 [JS] Transform & Mousemove (0) 2019.09.04 [ScrollMagic] 스크롤매직 라이브러리 - 중급편 (3) 2019.08.27 [ScrollMagic] 스크롤매직 라이브러리 - 기초편 (4) 2019.08.26 [JS30] Hold Shift and Check Checkboxes (0) 2019.02.27 댓글 0
인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9
