Cloud & Snowfall | Learning Axis

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  padding-top: 30px;
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cloud {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cloud > * {
  background-color: white;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
}
.cloud > :nth-child(1),
.cloud > :nth-child(3) {
  height: 30px;
  width: 80px;
}
.cloud > :nth-child(1) {
  height: 60px;
  border-radius: 50%;
  margin-right: -14%;
}
.cloud > :nth-child(3) {
  height: 75px;
  border-radius: 50%;
  margin-left: -15%;
  margin-bottom: 2%;
}
.cloud > :nth-child(2) {
  width: 150px;
  height: 100px;
  border-radius: 50%;
}
@media (max-width: 650px) {
  .cloud > :nth-child(2) {
    width: 100px;
    height: 90px;
  }
}
.snowflake-area {
  left: 0;
  bottom: 15%;
  width: 100%;
  position: absolute;
}
.snowflake {
  position: absolute;
  top: 20%;
  background-color: snow;
  border-radius: 50%;
  aspect-ratio: 1;
}
@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100vh));
  }
}

const cloud = document.querySelector(".cloud");
const snowflakeArea = document.createElement("div");
const middleCloud = document.querySelector(".middle-cloud");
middleCloud.style.position = "relative";
snowflakeArea.classList.add("snowflake-area");
middleCloud.appendChild(snowflakeArea);

for (let i = 0; i < 800; i++) {
  const snowflake = document.createElement("div");
  snowflake.classList.add("snowflake");
  
  const randomSize = Math.random() * 3 + 1;
  const randomLeft = Math.random() * 100;
  const animationDelay = Math.random() * 5 + 1;
  const animationDuration = Math.random() * 5 + 3;
  const randomOpacity = Math.random() * 0.6 + 0.4;
  const randomX = getRandomX();
  const randomXLeft = getRandomXLeft();
  
  snowflake.style.setProperty('--randomX', randomX);
  snowflake.style.setProperty('--randomXLeft', randomXLeft);
  snowflake.style.animation = "wind 5s linear infinite";
  snowflake.style.width = `${randomSize}px`;
  snowflake.style.left = `${randomLeft}%`;
  snowflake.style.animationDelay = `${animationDelay}s`;
  snowflake.style.animationDuration = `${animationDuration}s`;
  snowflake.style.opacity = `${randomOpacity}`;
  
  snowflakeArea.appendChild(snowflake);
}