본문 바로가기

Life/TIL

20200802 T.I.L

 

 

 

수영하는 우주돼지

 

 

 

 

오늘 한일

 

  • 마우스 이벤트를 이용해 마우스를 움직였을 때 우주공간이 3d 관점에서 보일 수 있도록 만들었다. 
  • 캐릭터의 팔다리 부분들과 몸통, 꼬리까지 css로 하나의 캐릭터로 조립을 완성했다. 중간에 우주 되지의 손이 검은색이라 우주공간에서 안 보이는 부분도 포토샵으로 색을 수정해서 보이도록 했다. 
  • 조립한 각각의 팔다리 꼬리들의 에니메이션들을 완성했다. 꼬리는 항상 흔들거리게, 팔다리는 class 이름이 swim 일 경우에 흔들거리게 만들었고 data-direction 이 forward, backward, left, right일 때 포지션에 맞게 캐릭터를 회전시켜 정말 수영하는 것처럼 보이게 만들었다. 
  • 대강의 css들은 모두 완성한거같다.

내일 할 일

 

  • 오늘 자바스크립트 코드를 많이 작성하지 못해서 못한 블로그 글을 써야겠다. 
  • 이제 캐릭터 생성자를 만들고 스크롤과 키다운 업 이벤트를 통해 생성한 캐릭터를 움직일 때 애니메이션들이 동작하고 움직이지 않을 때 멈추게 만드는 작업을 해야겠다. 

'Life > TIL' 카테고리의 다른 글

2020.08.05 T.I.L  (0) 2020.08.05
20200804 T.I.L  (0) 2020.08.04
20200803 T.I.L  (0) 2020.08.03
20200801 T.I.L  (0) 2020.08.01
20200731 T.I.L 시작  (0) 2020.07.31