animation2 [javascript] 자바스크립트 스프라이트 애니메이션 참고: https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3 자바스크립트를 사용하여 HTML5 캔버스에 스프라이트 시트로 애니메이션을 만드는 방법을 알아보겠습니다. 기본 설정 먼저 canvas 요소를 만듭니다. canvas 요소에 가장자리를 표시하여 가용한 영역이 어디까지인지 확인합니다. canvas { border: 1px solid black; } 이제 스프라이트 시트(https://opengameart.org/content/green-cap-character-16x18)를 로드합니다. 스프라이트 시트(sprite sheet)는 여러개의 이미지를 하나의 파일에 모아놓은 것으로 주로 연속적인 동작의 컷을 나열하여 애니메이션 조작을.. 2022. 11. 29. [javascript] CSS animation 속성 (애니메이션) 참고: https://blog.logrocket.com/guide-to-css-animation-for-javascript-developers/ 사람의 뇌가 움직임에 특화되어있다는 것은 익히 알려진 사실입니다. 인간은 정적인 요소에 초점을 맞추기보다는 요소가 어떻게 움직이는지에 더 많은 관심을 가집니다. CSS 애니메이션은 이러한 인간의 행동을 이용합니다. 웹사이트에 애니메이션이 추가되면 제품의 중요한 영역에 사용자의 관심을 끌게되어 지속적인 효과를 낳게되고 사용자 경험을 향상시킵니다. 이 포스트에서는 CSS 애니메이션의 이점, 다양한 CSS 애니메이션 속성, 그리고 자바스크립트 개발자들이 CSS 애니메이션을 사용하여 웹사이트를 보다 상호작용적이고 사용자 친화적으로 만들 수 있는 다양한 예를 알아보겠습니.. 2022. 11. 28. 이전 1 다음
