자바스크립트로 물보라 애니메이션 만들기

18 Oct 2023

javascript

이번 블로그 포스트에서는 자바스크립트를 사용하여 물보라 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. HTML 마크업

먼저, HTML 파일에 애니메이션을 추가하기 위해 아래의 마크업 구조를 작성해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <div class="container">
    <div id="storm"></div>
  </div>
</body>
</html>

위의 코드에서는 애니메이션을 적용할 <div> 요소를 “storm”이라는 id로 지정하고, 해당 요소를 감싸는 부모 요소를 “container” 클래스로 지정합니다.

2. CSS 스타일

다음으로, CSS 파일을 만들고 애니메이션에 필요한 스타일을 작성해야 합니다. 아래는 예시입니다.

.container {
  width: 100%;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
}

#storm {
  width: 300px;
  height: 300px;
  background-image: url("storm.png");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: stormAnimation 2s infinite;
}

@keyframes stormAnimation {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -30%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

위의 코드에서 “container” 클래스 및 “storm” id에 대한 스타일을 정의합니다. “storm” id의 배경 이미지와 크기, 위치 등을 설정하고, “stormAnimation”이라는 애니메이션을 정의합니다.

3. JavaScript 코드

마지막으로, 자바스크립트로 애니메이션을 제어하는 코드를 작성해야 합니다. 아래는 예시입니다.

// script.js 파일

window.addEventListener("load", () => {
  const stormElement = document.querySelector("#storm");

  setInterval(() => {
    stormElement.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 90 - 45}deg)`;
  }, 2000);
});

위의 코드는 페이지가 로드되면 “#storm” 요소를 선택하고, 일정 간격으로 요소의 transform 속성을 변경하여 애니메이션 효과를 생성합니다.

마무리

이제 모든 준비가 끝났습니다. 브라우저에서 HTML 파일을 열어 물보라 애니메이션을 확인해보세요. 자바스크립트를 사용하여 애니메이션을 제어하는 간단한 웹 페이지를 만들었습니다.

이제 여러분은 자바스크립트를 활용하여 다양한 애니메이션 효과를 구현할 수 있을 것입니다. 자세한 내용은 자바스크립트 MDN 문서를 참고하세요.

#javascript #animation