Colin's Blog
자바스크립트로 쥐가 달리는 애니메이션 만들기

이번 포스트에서는 자바스크립트를 사용하여 쥐가 달리는 애니메이션을 만드는 방법을 알아보겠습니다.

요구 사항

구현 단계

  1. HTML 요소 생성
  2. CSS 스타일링
  3. 자바스크립트로 애니메이션 구현

1. HTML 요소 생성

먼저 HTML 파일을 열고, 애니메이션을 넣을 <div> 요소를 생성합니다. 이 예제에서는 쥐가 달리는 애니메이션을 만들기 때문에, 쥐를 나타내는 이미지를 <img> 태그로 추가합니다.

<div id="animation-container">
  <img src="mouse.png" alt="mouse" id="mouse">
</div>

2. CSS 스타일링

다음으로 CSS 파일을 연 다음, <div> 요소와 <img> 태그에 스타일을 적용합니다. 우리는 애니메이션을 진행할 위치를 지정하고, 이미지의 크기를 조절할 것입니다.

#animation-container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
}

#mouse {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: -50px;
}

3. 자바스크립트로 애니메이션 구현

이제 자바스크립트 파일을 연 다음, 애니메이션을 구현할 코드를 작성합니다. 쥐 이미지를 오른쪽으로 이동시키고, 일정한 간격으로 반복해서 움직이도록 만들 것입니다.

const mouse = document.getElementById('mouse');

let position = -50;
const speed = 5; 
const interval = setInterval(moveRight, 50); 

function moveRight() {
  if (position >= 550) {
    position = -50; 
  } else {
    position += speed;
    mouse.style.left = `${position}px`;
  }
}

위의 코드를 실행하면, 쥐 이미지가 오른쪽으로 이동하고 왼쪽 끝에 도착하면 다시 이동을 시작합니다. 원하는 속도와 간격으로 애니메이션을 조절하려면 speed 변수와 interval 값을 수정하면 됩니다.

마무리

이제 웹 브라우저에서 HTML 파일을 실행하면 쥐가 달리는 애니메이션을 볼 수 있습니다. 이번 포스트를 통해 자바스크립트로 애니메이션을 만드는 기초를 배우셨습니다. 추가적으로 애니메이션 효과를 더하거나 다양한 움직임을 구현해볼 수도 있습니다.

자세한 내용은 다음 자료를 참고하세요:

#javascript #애니메이션

© 2018 Colin. All rights reserved.