Interactive Developer
코드로 만드는 애니메이션, 영감, 실리콘밸리의 생활과 해외취업에 대해 이야기 합니다. https://blog.cmiscm.com/
www.youtube.com
오늘 약속이 있어서, 전철을 오래동안 타고 있었다. 근데, 이 개발자분의 유튜브를 보는데 너무나 나에게 큰 충격을 주었다.. 평소에 조금씩 무시해오던 프론트가 되게 예술같이 보였기 때문이다...
그래서!!!
바로, HTML canvas 찾아봄 ㅎ...
뭐부터 해볼까 하다가
www.youtube.com/watch?v=sLCiI6d5vTM&ab_channel=ChristianLifeChurch
이게 되게 되게 재밌어 보이면서, 어려워 보였다.
근데, 코드를 쭉 따라가면서 짜보는데 생각보다 쉬웠고, 되게 쉬운 로직으로 짜인다는 것을 알았다.
그래서 추가적으로 아래 링크와 같이 막대기도 옮겨가면서 bouncing ball을 만들어보았다.
shinkeonkim.github.io/css-animation-study/bouncing-ball/
bouncing ball
shinkeonkim.github.io
(반응형 디자인은 고려하지 않은 예제라, 그냥 큰 화면에서 봐주시길 바랍니다..ㅎㅎㅎㅎ)
코드는 저의 레포에 있겠지만... 그냥 위에 있는 유튜브를 보시면서 코드를 한번 쭉 짜보시길 권한다. 재밌으니..
나중에, 한번 블럭 부수기?를 만들어봐도 괜찮을 것 같다.
'TIL' 카테고리의 다른 글
| [TIL] swiper.js 사용하기 (2) | 2020.11.12 |
|---|---|
| [TIL] box-shadow로 광원 효과처럼 보이네? (0) | 2020.11.08 |
| [TIL] Window에서 폴더 안에 있는 특정 확장자 파일 지우기 (0) | 2020.11.08 |
| [TIL] vscode snippet으로 빠르게 초기 코드 작성하기 (0) | 2020.04.29 |
| [TIL] 비트연산자의 우선순위 (0) | 2020.03.10 |