[JS] Transform & Mousemove

320x100

 

인터렉티브 강의에서 배운 내용을 응용한 예제! (야호)

 

 

See the Pen Text transform with the mousemove event by NY KIM (@nykim_) on CodePen.

 

 

그라데이션으로 빛 효과를 만들고 background-position을 움직여 반사되는 느낌을 내봤다.

 

이때 그라데이션이 깔끔하게 잘리려면 background-clip:text 처리를 해야하는데, 그러기 위해서는 잘라낼 기준이 될 텍스트가 필요했다....

그래서 어쩔 수 없이 data-text를 넣는 걸로 처리해부려따.

(더 좋은 방법을 발견하면 알려줘 미래의 나!!!!)

 

 

 

 

 

++

 

이건 이미지 때문에 코드펜에 올리지는 못했지만, 이런 식으로 그림자를 처리할 수도 있겠더라!

그림자가 될 회색의 블러처리 된 이미지를 활용하면 된다 ;9

여기에 위의 마우스이벤트를 걸면, 마우스 위치에 따라 그림자 방향이 슈슈슉 바뀐다.

 

 

흰색 텍스트 이미지 + 회색 블러 이미지를 교묘하게 배치하면...

이런 그림자 놀이가 가능해진다! ㅇ>-<

 

 

 

이처럼 마우스무브 이벤트를 통해, 다양한 응용이 가능할 것 같다 ( ´ ▽ ` )ﾉ

728x90

저작자표시

'Study > JavaScript' 카테고리의 다른 글

[Inside JS] 2. 함수와 프로토타입 체이닝  (0)	2019.09.10
[Inside JS] 1. 자바스크립트 데이터 타입과 연산자  (0)	2019.09.05
[JS] Transform & Mousemove  (0)	2019.09.04
[ScrollMagic] 스크롤매직 라이브러리 - 중급편  (4)	2019.08.27
[ScrollMagic] 스크롤매직 라이브러리 - 기초편  (7)	2019.08.26
[JS30] Hold Shift and Check Checkboxes  (0)	2019.02.27