nana_log
Home
  • 분류 전체보기 (67)
    • Study (62)
      • Markup (2)
      • CSS (12)
      • JavaScript (21)
      • Framework (5)
      • Tools (0)
      • Web Animation (2)
      • Design (8)
      • etc. (12)
    • Days (4)
      • Work (2)
      • Loves (2)
Home
  • 분류 전체보기 (67)
    • Study (62)
      • Markup (2)
      • CSS (12)
      • JavaScript (21)
      • Framework (5)
      • Tools (0)
      • Web Animation (2)
      • Design (8)
      • etc. (12)
    • Days (4)
      • Work (2)
      • Loves (2)
About
블로그 내 검색
Portfolio

nana_log

인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

  • Study/JavaScript

    [JS] Transform & Mousemove

    2019. 9. 4.

    by. 나나 (nykim)

     

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

     

     

    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

    관련글

    • [Inside JS] 2. 함수와 프로토타입 체이닝 2019.09.10
    • [Inside JS] 1. 자바스크립트 데이터 타입과 연산자 2019.09.05
    • [ScrollMagic] 스크롤매직 라이브러리 - 중급편 2019.08.27
    • [ScrollMagic] 스크롤매직 라이브러리 - 기초편 2019.08.26
    맨 위로
이전
1 ··· 8 9 10 11 12 13 14 15 16 ··· 21
다음
전체 글 보기
  • Github
  • Portfolio
  • Mail

Today 191

Total 139,793

좋아하니까, 나답게

Designed by Nana
블로그 이미지
나나 (nykim)
쉽고, 재밌고, 특별한 걸 좋아해요. 가끔은 걷고 가끔은 뛰면서 나아가는 중.