이 자습서에서는 CSS와 JavaScript를 사용하여 강설 애니메이션을 만드는 방법에 대해 알아 봅니다.

https://reactgo.com/css-snow-animation/ 

코드펜 데모 

여기 강설 애니메이션 데모가 있습니다.

https://codepen.io/saigowthamr/pen/MWYBvvb 

시작하기 

먼저 div 태그가 포함 된 html 마크 업을 생성하고 눈송이 아이콘이 있는 i 태그가 추가됩니다.

여기서 사용 중인 눈송이 아이콘은 날씨 아이콘 패키지에서 가져옵니다.

<div class="container">
  <i class="wi wi-snowflake-cold flake"></i>
</div>

Css 

컨테이너와 플레이크 클래스에 CSS 스타일을 추가해 보겠습니다.

body {
  font-family: sans-serif;
  background: #070606e8;
  background-image: url(http://photoshopdesire.com
  /wp-content/uploads/2016/02/day2night-after-photoshop.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.container {
  height: 100vh;
  overflow: hidden;
}

.flake {
  color: rgb(247, 252, 243);
  font-size: 2rem;
  padding: 1rem;
  animation: fall 2s linear forwards infinite;
  animation-delay: 1s;
}

/* animating snowflake in Y-axis  */

@keyframes fall {
  from {
    transform: translateY(-10vh);
  }
  to {
    transform: translateY(100vh);
  }
}

fall 애니메이션으로 눈송이를 무한정 애니메이션 합니다.

그러나 현재 출력을 보면 눈송이가 하나만 떨어집니다.

JavaScript 

이제 JavaScript를 사용하여 여러 눈송이를 동적으로 만들고 div 컨테이너에 추가했습니다.

const flake = document.querySelector(".flake");
const container = document.querySelector(".container");

function createFlake() {

  // cloning the flake node
  const clone = flake.cloneNode(true);

  // creating left padding
  clone.style.paddingLeft = Math.random() * 10 + "px";

  // animation duration between 3-5
  clone.style.animationDuration = Math.random() * 5 + 3 + "s";
  clone.style.opacity = Math.random() * 1;
  container.append(clone); // adding clone flake to container
}

// to create more flakes decrease 100
const s = setInterval(createFlake, 100);


setTimeout(() => {
  clearInterval(s);
}, 3000); // flake creation stops after 3000 milliseconds or 3s

위의 코드에서 먼저 document.querySelector()를 사용하여 두 개의 dom 노드 (flake, container)에 액세스했습니다.

createFlake() 함수는 새 눈송이를 만들고 div 컨테이너에 추가하는 데 사용됩니다.

setInterval 메소드는 100 밀리 초마다 createFlake() 함수를 실행합니다.

마지막으로 setTimeout() 메소드를 사용하여 3000 밀리 초 또는 3 초 후에 눈송이 생성을 중지합니다.

Bonus 

여러 색상으로 눈송이를 만들려면 createFlake() 함수 내에서 이 코드를 사용할 수 있습니다.

const randomC = Math.random() * 200;
const randomA = Math.random() * 200;
const randomB = Math.random() * 56;
clone.style.color = `rgb(${randomA + 256},${randomB + 200},${randomC + 100})`;

Demo 

https://codepen.io/saigowthamr/pen/MWYBXwO