자바스크립트로 비가 내리는 애니메이션 만들기

18 Oct 2023

javascript

자바스크립트를 사용하여 비가 내리는 애니메이션을 만들어 볼 수 있습니다. 이 튜토리얼에서는 HTML과 CSS를 사용하여 기본적인 비 내리는 애니메이션을 만들고, 자바스크립트를 추가하여 애니메이션을 제어하는 방법을 알아보겠습니다.

1. HTML 및 CSS 설정

먼저, HTML 파일을 만들고, 스타일을 적용하기 위해 CSS 파일을 추가합니다. HTML 파일에서는 레이아웃을 구성하는데 필요한 요소들을 추가하고, CSS 파일에서는 애니메이션 스타일을 정의합니다.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="rain"></div>
  </body>
</html>

CSS

.rain {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  position: relative;
}

2. JavaScript로 애니메이션 추가

이제 자바스크립트를 사용하여 비가 내리는 애니메이션을 추가해보겠습니다. 자바스크립트 파일을 생성하고, HTML 파일에 추가합니다.

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  createRain();
});

function createRain() {
  var rain = document.querySelectorAll('.rain');
  for (var i = 0; i < rain.length; i++) {
    var droplet = document.createElement('span');
    droplet.classList.add('droplet');
    droplet.style.left = Math.random() * 100 + 'vw';
    droplet.style.animationDuration = Math.random() * 3 + 2 + 's';
    droplet.style.animationDelay = Math.random() * 2 + 's';
    rain[i].appendChild(droplet);
  }
}

위의 자바스크립트 코드는 DOMContentLoaded 이벤트를 감지하고, createRain() 함수를 호출합니다. createRain() 함수는 .rain 클래스를 가진 모든 요소를 선택하고, 각 요소에 비 내리는 애니메이션을 생성합니다.

3. 애니메이션 스타일 추가

마지막으로, CSS 파일에 애니메이션 스타일을 추가합니다.

CSS

.rain .droplet {
  position: absolute;
  width: 2px;
  height: 30px;
  background-color: #00f;
  bottom: 0;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-30px) scale(0, 0.5);
  }
  50% {
    transform: translateY(200vh) scale(1, 1);
  }
  100% {
    transform: translateY(200vh) scale(0, 0.5);
  }
}

위의 CSS 코드에서는 .rain .droplet 클래스에 비 내리는 애니메이션 스타일을 적용합니다. fall 애니메이션은 transform 속성을 사용하여 비를 떨어뜨리고, linear 타이밍 함수와 infinite 반복 속성을 설정합니다.

마무리

이제 웹 브라우저에서 HTML 파일을 열어 비 내리는 애니메이션을 확인할 수 있습니다. 자바스크립트를 사용하여 애니메이션을 생성하고 제어할 수 있으므로, 다양한 애니메이션 효과를 추가하거나 애니메이션 속도를 조절하는 등의 변형도 가능합니다.

이 튜토리얼은 자바스크립트로 비가 내리는 애니메이션을 만드는 간단한 예제를 제공해주었습니다. 추가적인 참고 자료들을 찾아보면서 여러분만의 독특한 애니메이션을 만들어보세요!

참고 자료:

#javascript #animation