자바스크립트로 빗방울이 흩날리는 애니메이션 구현하기

18 Oct 2023

javascript

이번에는 자바스크립트를 사용하여 빗방울이 흩날리는 애니메이션을 구현해보겠습니다. 이 애니메이션은 웹페이지에 생동감을 더해주고 사용자들에게 재미를 줄 수 있습니다.

1. HTML 구조 설정하기

먼저, 애니메이션을 보여줄 HTML 요소를 만들어야 합니다. 다음과 같은 구조로 HTML을 작성해주세요.

<div id="rain-container">
  <div class="raindrop"></div>
  <div class="raindrop"></div>
  <div class="raindrop"></div>
  <!-- 추가적인 빗방울 요소들을 원하는 만큼 추가해주세요 -->
</div>

2. CSS 스타일 작성하기

다음으로, 빗방울 요소의 초기 스타일을 설정해야 합니다. CSS를 사용하여 다음과 같이 스타일을 작성해주세요.

#rain-container {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.raindrop {
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: blue;
}

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

이제, 자바스크립트를 사용하여 빗방울 애니메이션을 구현해보겠습니다. 자바스크립트 코드를 다음과 같이 작성해주세요.

function createRaindrop() {
  const rainContainer = document.getElementById('rain-container');
  const raindrop = document.createElement('div');
  raindrop.classList.add('raindrop');

  // 빗방울의 초기 위치를 설정합니다.
  const initialXPos = Math.random() * rainContainer.offsetWidth;
  raindrop.style.left = initialXPos + 'px';

  // 빗방울을 컨테이너에 추가합니다.
  rainContainer.appendChild(raindrop);

  // 빗방울 애니메이션을 적용합니다.
  function animateRaindrop() {
    const yPos = parseFloat(raindrop.style.top);
    raindrop.style.top = (yPos + 1) + 'px';

    // 빗방울이 화면을 벗어나면 제거합니다.
    if (yPos > rainContainer.offsetHeight) {
      rainContainer.removeChild(raindrop);
      clearInterval(intervalId);
    }
  }

  // 애니메이션을 실행합니다.
  const intervalId = setInterval(animateRaindrop, 10);
}

// 빗방울을 지속적으로 생성하는 함수를 호출합니다.
setInterval(createRaindrop, 100);

4. 결과 확인하기

이제 HTML 파일을 브라우저에서 열어서 애니메이션이 잘 작동하는지 확인해보세요. 빗방울이 흩날리는 모습을 볼 수 있을 것입니다.

마무리

이렇게 자바스크립트로 빗방울 애니메이션을 구현해보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수도 있습니다. 추가적인 스타일링이나 기능 추가는 자유롭게 시도해보세요!