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

이번에는 자바스크립트를 사용하여 눈이 내리는 애니메이션을 만들어보겠습니다. 이 애니메이션은 웹페이지에 눈이 내리는 효과를 주어 새로운 겨울 분위기를 연출할 수 있습니다.

필요한 자원 준비하기

우선, 이 애니메이션을 만들기 위해 몇 가지 필요한 자원을 준비해야 합니다.

HTML 구조 설정하기

HTML 파일에서 애니메이션을 표현할 요소를 설정해야 합니다. 일반적으로 <div> 태그를 사용하여 요소를 생성합니다. 이번 예시에서는 눈 한 개를 표현하기 위해 <div class="snowflake"></div> 요소를 사용하겠습니다. 그리고 이 요소를 눈이 내리는 위치에 배치하기 위해 <div id="container"></div> 요소 안에 넣을 것입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div class="snowflake"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS 스타일 지정하기

애니메이션 효과를 주기 위해 CSS를 활용합니다. 눈의 모양을 지정하기 위해 미리 준비한 눈 이미지 파일을 사용하겠습니다.

.snowflake {
  position: absolute;
  width: 36px;
  height: 36px;
  background-image: url('snowflake.png');
  background-size: cover;
}

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

이제 자바스크립트를 사용하여 눈이 내리는 애니메이션을 구현해보겠습니다. 우선, 눈이 내리는 속도를 조절하기 위해 speed 변수를 정의합니다. 그리고 눈 요소를 생성하여 화면에 추가합니다.

var speed = 3; // 눈이 내려가는 속도 조절

function createSnowflake() {
  var snowflake = document.createElement('div'); // 눈 요소 생성
  snowflake.classList.add('snowflake'); // 클래스 추가
  
  // 랜덤한 시작 위치와 속도 지정
  var startX = Math.random() * window.innerWidth;
  var startOpacity = 0.5 + Math.random() * 0.5;
  var startSpeed = 1 + Math.random() * speed;
  
  snowflake.style.left = startX + 'px'; // 시작 위치 설정
  snowflake.style.opacity = startOpacity; // 투명도 설정

  // 눈이 내려가는 애니메이션 설정
  var animation = snowflake.animate([
    { transform: 'translateY(0px)', opacity: startOpacity },
    { transform: 'translateY('+ window.innerHeight +'px)', opacity: 0 }
  ], {
    duration: startSpeed * 1000, // 애니메이션 속도 설정
    iterations: Infinity // 무한 반복
  });

  // 애니메이션이 끝나면 눈 요소 제거
  animation.onfinish = function() {
    snowflake.remove();
  };

  // 눈 요소를 화면에 추가
  document.getElementById('container').appendChild(snowflake);
}

// 눈 요소 생성
createSnowflake();

결과 확인하기

위의 코드를 복사하여 HTML, CSS, JavaScript 파일에 붙여넣은 후 웹 브라우저에서 실행해보세요. 그러면 눈이 내리는 애니메이션을 확인할 수 있습니다.

이것은 간단한 눈이 내리는 애니메이션의 예시이며, 추가적인 스타일링이나 기능을 원하는 경우 자유롭게 수정하면 됩니다.

눈이 내리는 애니메이션 예시: 링크

#javascript #애니메이션

© 2018 Colin. All rights reserved.