Javascript로 구현하는 눈내리는 애니메이션 효과 (snowfall animation)

구현 결과

1. 기본 HTML 구조 설정하기

먼저, 가장 기본적인 HTML 구조를 만듭니다. 이 단계에서는 브라우저에 표시될 빈 페이지를 만드는 것이 목표입니다.

html

      <!DOCTYPE html>
<html>
  <head>
    <title>눈 내리는 효과</title>
  </head>
  <body>
    <!-- 눈송이가 추가될 부분 -->
  </body>
</html>

이 코드는 웹 페이지의 기본 구조를 설정합니다. <head> 태그 안에는 페이지의 제목을 넣고, <body> 태그 안에는 추후 눈송이가 추가될 것입니다.

2. CSS를 이용한 배경 설정

다음으로, 페이지의 배경을 설정합니다. 겨울 분위기에 맞는 배경색을 선택해보세요.

html

      <style>
  body {
    height: 100vh;
    background: linear-gradient(0deg, #333, rgb(108, 113, 164));
    margin: 0;
  }
</style>

이 CSS 코드는 <body> 태그의 배경을 어두운 그라데이션으로 설정합니다. 이 배경은 눈송이가 더 잘 보이게 하는 역할을 합니다.

3. CSS를 이용한 눈송이 기본 스타일 설정

이제 눈송이의 기본 스타일을 만듭니다. 눈송이는 작고 흰색 원으로 표현됩니다.

html

      <style>
  .snow {
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 3px 3px white;
  }
</style>

.snow 클래스는 눈송이의 모양을 정의합니다. 각 눈송이는 흰색 원형으로, 그림자를 이용해 더 돋보이게 만들어집니다.

4. JavaScript를 사용한 눈송이 생성 및 애니메이션 적용

마지막으로, JavaScript를 사용하여 눈송이를 생성하고 화면을 통해 떨어지게 만듭니다. 이 단계에서는 하나의 눈송이를 생성하는 방법부터 시작합니다.

html

      <script>
  const snow = document.createElement("div");
  snow.className = "snow";
  document.body.appendChild(snow);
</script>

이 코드는 새로운 <div> 요소를 만들고, 그것에 snow 클래스를 적용한 다음, 이를 <body>에 추가합니다. 현재는 정지해 있는 하나의 눈송이만 보일거에요.

5. 눈송이 하나에 애니메이션 적용

다음으로, 생성된 단일 눈송이에 애니메이션을 적용합니다.

html

      <script>
  // 앞서 추가한 코드
  const snow = document.createElement("div");
  snow.className = "snow";
  document.body.appendChild(snow);

  // 애니메이션 설정
  const startX = 0; // 시작 X 좌표
  const endX = 100; // 종료 X 좌표
  const scale = 1; // 눈송이 크기

  const keyframe = [
    { transform: `translate(${startX}vw, 0) scale(${scale})` },
    { transform: `translate(${endX}vw, 100vh) scale(${scale})` },
  ];

  const option = {
    duration: 5000, // 애니메이션 지속 시간
    easing: "linear",
    iterations: Infinity,
  };

  snow.animate(keyframe, option);
</script>

이 코드는 눈송이가 화면 상단에서 시작하여 바닥까지 내려오도록 하는 애니메이션을 정의합니다. translate를 사용하여 눈송이의 위치를 변경하고, scale로 크기를 조정합니다.

5. 여러 눈송이에 무작위 속성 적용

마지막으로, 여러 눈송이를 생성하고 각각에 무작위 속성을 적용하는 방법을 살펴봅니다.

html

      <script>
  for (let i = 0; i < 200; i++) {
    const snow = document.createElement("div");
    snow.className = "snow";
    snow.style.opacity = Math.random(); // 무작위 투명도

    const startX = Math.random() * 100; // 시작 X 좌표 무작위
    const endX = startX + (Math.random() * 20 - 10); // 종료 X 좌표 무작위
    const scale = Math.max(Math.random(), 0.5); // 무작위 크기

    const keyframe = [
      { transform: `translate(${startX}vw, 0) scale(${scale})` },
      { transform: `translate(${endX}vw, 100vh) scale(${scale})` },
    ];

    const option = {
      duration: 15000 + Math.random() * 5000, // 무작위 지속 시간
      easing: "linear",
      iterations: Infinity,
      delay: -Math.random() * 20 * 1000, // 무작위 지연 시간
    };

    snow.animate(keyframe, option);
    document.body.appendChild(snow);
  }
</script>

이 코드는 200개의 눈송이를 생성하고, 각 눈송이에 무작위 시작 위치, 종료 위치, 크기, 투명도를 적용하여 더 자연스러운 눈 내리는 효과를 만듭니다.