Neste tutorial, vamos implementar um efeito de neve animado em uma página da Web usando CSS e JavaScript simples, bem a tempo para as festas de fim de ano.
‘Esta é a estação para ser alegre, então deixe nevar, deixe nevar, deixe nevar!
1. Marcação com HTML de feriado
Para nossa marcação, teremos dois contêineres principais: um elemento principal contendo o conteúdo de nossa página e um elemento snow-container que exibirá a neve.
Happy Holidays!
2. Estilização da temporada com CSS
Nesta demonstração, nosso conteúdo principal tem uma cor de fundo gradiente para dar um efeito de céu noturno. Conseguimos isso usando a função de gradiente linear do CSS.
Para simplificar, digamos que estamos construindo isso no CodePen, então a marcação vai na aba HTML, os estilos na aba CSS, etc.
main {
background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Pacifico", cursive;
height: 100vh;
padding: 20px;
text-align: center;
}
h1 {
color: white;
}
Aqui está a aparência do nosso banner agora:
Também usaremos CSS para lidar com a animação de cada elemento de neve. Cada floco de neve terá duas animações: uma animação de queda para lidar com o movimento do floco de neve de cima para baixo na tela e uma animação de oscilação para lidar com o movimento lento do floco de neve de um lado para o outro.
@keyframes fall {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100vh;
opacity: 1;
}
}
@keyframes sway {
0% {
margin-left: 0;
}
25% {
margin-left: 50px;
}
50% {
margin-left: -50px;
}
75% {
margin-left: 50px;
}
100% {
margin-left: 0;
}
}
Também estilizaremos nosso contêiner de neve e o elemento de neve que criaremos em JavaScript.
#snow-container {
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
transition: opacity 500ms;
width: 100%;
}
.snow {
animation: fall ease-in infinite, sway ease-in-out infinite;
color: skyblue;
position: absolute;
}
A propriedade de animação nesta demonstração assume três valores:
-
name: Este é o valor da animação que criamos nos quadros-chave.
-
timing: Isso determina como a animação progride.
-
iteração: Este é o número de vezes que a animação acontece. Usamos infinito para repetir constantemente a animação dos flocos de neve.
3. Fa la la la la Funcionalidade ♬
Agora podemos trabalhar na parte divertida: fazer nevar! Primeiramente, na aba JS do CodePen, vamos atribuir um valor ao nosso elemento container:
const snowContainer = document.getElementById("snow-container");
Para nosso conteúdo de floco de neve, usaremos símbolos HTML (❄ ❅ ❆):
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!
