Html snowflakes effect built with Js and Css

snowflakes.html

<!-- HTML -->
<div class="snowflakes" aria-hidden="true"></div>

<!-- JavaScript -->
<script>
  const snowflakesContainer = document.querySelector('.snowflakes');

  // Number of snowflakes you want to add
  const numberOfSnowflakes = 100;

  // Animation speed in seconds
  const fallAnimationDuration = 5;
  const shakeAnimationDuration = 3;

  // Array of possible snowflake characters
  const snowflakeCharacters = ['❄', '❅', '❆'];

  for (let i = 0; i < numberOfSnowflakes; i++) {
    const snowflake = document.createElement('div');
    snowflake.className = 'snowflake';

    // Set random left position between 0% and 100%
    const leftPosition = Math.random() * 100;
    snowflake.style.left = `${leftPosition}%`;

    // Randomly select a snowflake character
    const randomIndex = Math.floor(Math.random() * snowflakeCharacters.length);
    snowflake.textContent = snowflakeCharacters[randomIndex];

    snowflakesContainer.appendChild(snowflake);
  }

  // Update animation durations dynamically
  document.styleSheets[0].insertRule(`.snowflake { -webkit-animation-duration: ${fallAnimationDuration}s, ${shakeAnimationDuration}s; animation-duration: ${fallAnimationDuration}s, ${shakeAnimationDuration}s; }`, 0);

  // Update animation delays dynamically
  for (let i = 0; i < numberOfSnowflakes; i++) {
    const animationDelay = Math.random() * 10; // Random delay between 0 and 10 seconds
    document.styleSheets[0].insertRule(`.snowflake:nth-of-type(${i + 1}) { -webkit-animation-delay: ${animationDelay}s, ${animationDelay}s; animation-delay: ${animationDelay}s, ${animationDelay}s; }`, i + 1);
  }
</script>

<style>
  .snowflake{color:#fff;font-size:1em;font-family:Arial;text-shadow:0 0 1px #000;position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
</style>