코인이 일정한 간격으로 떨어지는 애니메이션은 웹 페이지에 동적인 요소를 추가하여 사용자들에게 시각적인 효과를 제공할 수 있는 좋은 방법입니다. 자바스크립트를 사용하여 이러한 애니메이션을 구현하는 방법을 살펴보겠습니다.

HTML 구조 설정하기

먼저, 애니메이션을 포함할 HTML 구조를 설정해야 합니다. 다음과 같이 <div> 태그에 coin 클래스를 추가해 줍니다.

<div class="coin"></div>

CSS 스타일 설정하기

coin 클래스에 대한 CSS 스타일을 설정하여 동전을 나타낼 수 있습니다. 동전의 크기, 색상, 위치 등을 원하는 대로 설정해주세요. 예를 들어, 다음과 같이 스타일을 설정할 수 있습니다.

.coin {
  width: 20px;
  height: 20px;
  background-color: gold;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

자바스크립트로 애니메이션 구현하기

이제 자바스크립트를 사용하여 동적인 애니메이션을 구현해보겠습니다. 먼저, setInterval 함수를 사용하여 일정한 간격으로 애니메이션을 실행해줍니다. 이때, 각 애니메이션마다 동전의 위치를 조금씩 이동시켜 주면 됩니다.

setInterval(() => {
  const coin = document.querySelector('.coin');
  const currentTop = parseInt(window.getComputedStyle(coin).top);

  coin.style.top = currentTop + 10 + 'px';
}, 1000);

위 예제에서는 1초마다 동전을 10px씩 아래로 이동시킵니다.

실행 결과 확인하기

위의 코드를 HTML 파일에 포함시키고, 웹 브라우저에서 미리보기를 해보세요. 동전이 일정한 간격으로 떨어지는 애니메이션이 동작할 것입니다.

마무리

이와 같이 자바스크립트를 사용하여 일정 간격으로 코인이 떨어지는 애니메이션을 구현할 수 있습니다. 여기에서는 간단한 예제를 소개했지만, 여러분만의 창의적인 아이디어로 더 다양한 애니메이션을 만들어 보세요!

참고: MDN Web Docs - setInterval