Criaremos um array snowContent para conter os códigos dos símbolos

const snowContent = ['❄', '❅', '❆']

Para criar um efeito de neve caindo, precisamos randomizar a aparência e a animação de cada floco de neve.

vamos usar o Math.random() e Math.floor() funções para lidar com a geração de valores aleatórios para nossos elementos de neve.

const random = (num) => {
  return Math.floor(Math.random() * num);
}

Agora podemos criar uma função para gerar um estilo aleatório para cada floco de neve. Vamos gerar uma posição aleatória, tamanho e duração da animação.

const getRandomStyles = () => {
  const top = random(100);
  const left = random(100);
  const dur = random(10) + 10;
  const size = random(25) + 25;
  return `
    top: -${top}%;
    left: ${left}%;
    font-size: ${size}px;
    animation-duration: ${dur}s;
  `;
}

Para nossa constante de duração e tamanho, adicionamos um valor de número fixo para garantir que o número gerado aleatoriamente tenha um valor mínimo do número que está sendo adicionado (ou seja, o menor número para a duração da animação de qualquer floco de neve é ​​10s)

Para nossa constante superior, atribuímos um valor negativo para que os flocos de neve comecem em qualquer porcentagem acima da tela visível.

Em seguida, cuidaremos de anexar os flocos de neve ao recipiente de neve.

const createSnow = (num) => {
  for (var i = num; i > 0; i--) {
    var snow = document.createElement("div");
    snow.className = "snow";
    snow.style.cssText = getRandomStyles();
    snow.innerHTML = snowContent[random(2)]
    snowContainer.append(snow);
  }
}

Nesta demonstração, usamos um por loop para criar um número fixo de flocos de neve e anexá-los ao contêiner. Também atribuímos aleatoriamente o innerHTML como qualquer um dos valores em nosso snowContent variedade.

Então, vamos chamar o createSnow funcionar assim que nossa página for carregada usando o ouvinte de evento load.

window.addEventListener("load", () => {
  createSnow(30)
});

E está nevando! Clique Repetir para ver a neve animada:

Removendo flocos de neve

Também podemos optar por adicionar uma função para remover os flocos de neve.

const removeSnow = () => {
  snowContainer.style.opacity = "0";
  setTimeout(() => {
    snowContainer.remove()
  }, 500)
}

Nesta função, atribuímos ao nosso snowContainer uma opacidade de 0 para permitir que ele desapareça suavemente e, depois de meio segundo, removemos o contêiner usando o .remove() método.

Podemos então optar por chamar essa função como quisermos. Podemos remover a neve quando o usuário clicar em qualquer lugar da página:

window.addEventListener("click", () => {
  removeSnow()
});

Ou podemos incluí-lo na função setTimeout() para que desapareça após um determinado período de tempo:

window.addEventListener("load", () => {
  createSnow(30)
  setTimeout(removeSnow, 10000)
});

Trocando os flocos de neve

Como construímos isso do zero, também podemos atualizar o conteúdo e a animação do elemento para criar outros efeitos divertidos, como balões flutuantes:

ou mesmo Nyan Cat animado:

Espero que você tenha gostado deste tutorial animado de neve e que tenha feito você se sentir bem e festivo!