1. Marcação com HTML de feriados
Para nossa marcação, teremos dois contêineres primários: um elemento principal contendo o conteúdo de nossa página e um elemento snow-container que exibirá a neve.
1 |
|
2 |
Happy Holidays!
|
3 |
|
4 |
|
5 |
|
2. Estilo de neve animado 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 CSS.
Para simplificar, digamos que estamos construindo essa neve animada no CodePen, então a marcação vai na aba HTML, os estilos na aba CSS, etc.
1 |
main { |
2 |
background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%); |
3 |
display: flex; |
4 |
align-items: center; |
5 |
justify-content: center; |
6 |
font-family: "Pacifico", cursive; |
7 |
height: 100vh; |
8 |
padding: 20px; |
9 |
text-align: center; |
10 |
}
|
11 |
|
12 |
h1 { |
13 |
color: white; |
14 |
}
|
Esta é 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 controlar o movimento do floco de neve de cima para baixo na tela e uma animação de balanço para mover o floco de neve lentamente de um lado para o outro.
1 |
@keyframes fall { |
2 |
0% { |
3 |
opacity: 0; |
4 |
}
|
5 |
50% { |
6 |
opacity: 1; |
7 |
}
|
8 |
100% { |
9 |
top: 100vh; |
10 |
opacity: 1; |
11 |
}
|
12 |
}
|
13 |
|
14 |
@keyframes sway { |
15 |
0% { |
16 |
margin-left: 0; |
17 |
}
|
18 |
25% { |
19 |
margin-left: 50px; |
20 |
}
|
21 |
50% { |
22 |
margin-left: -50px; |
23 |
}
|
24 |
75% { |
25 |
margin-left: 50px; |
26 |
}
|
27 |
100% { |
28 |
margin-left: 0; |
29 |
}
|
30 |
}
|
Também estilizaremos nosso contêiner de neve e o elemento de neve que criaremos em JavaScript.
1 |
#snow-container { |
2 |
height: 100vh; |
3 |
overflow: hidden; |
4 |
position: absolute; |
5 |
top: 0; |
6 |
transition: opacity 500ms; |
7 |
width: 100%; |
8 |
}
|
9 |
|
10 |
.snow { |
11 |
animation: fall ease-in infinite, sway ease-in-out infinite; |
12 |
color: skyblue; |
13 |
position: absolute; |
14 |
}
|
A propriedade de animação nesta demonstração assume três valores:
-
nome: este é o valor da animação que criamos nos quadros-chave.
-
tempo: 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! Primeiro, na aba JS do CodePen, vamos atribuir um valor ao nosso elemento contêiner:
1 |
const snowContainer = document.getElementById("snow-container"); |
Para nosso conteúdo de floco de neve, usaremos símbolos HTML (❄ ❅ ❆):
snowContent array para conter os códigos dos símbolos
1 |
const snowContent = ['❄', '❅', '❆'] |
Para criar um efeito de neve caindo, precisaremos randomizar a aparência e a animação de cada floco de neve.
Usaremos o Math.random() e Math.floor() funções para lidar com a geração de valores aleatórios para nossos elementos de neve animados.
1 |
const random = (num) => { |
2 |
return Math.floor(Math.random() * num); |
3 |
}
|
Agora podemos criar uma função para gerar um estilo aleatório para cada floco de neve. Geraremos uma posição, tamanho e duração da animação aleatórios.
1 |
const getRandomStyles = () => { |
2 |
const top = random(100); |
3 |
const left = random(100); |
4 |
const dur = random(10) + 10; |
5 |
const size = random(25) + 25; |
6 |
return ` |
7 |
top: -${top}%; |
8 |
left: ${left}%; |
9 |
font-size: ${size}px; |
10 |
animation-duration: ${dur}s; |
11 |
`; |
12 |
}
|
Para nossa constante de duração e tamanho, adicionamos um valor numérico fixo para garantir que o número gerado aleatoriamente tenha um valor mínimo do número que está sendo adicionado (ou seja, o número mais baixo 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.
A seguir, trataremos de anexar os flocos de neve ao recipiente de neve.
1 |
const createSnow = (num) => { |
2 |
for (var i = num; i > 0; i--) { |
3 |
var snow = document.createElement("div"); |
4 |
snow.className = "snow"; |
5 |
snow.style.cssText = getRandomStyles(); |
6 |
snow.innerHTML = snowContent[random(2)] |
7 |
snowContainer.append(snow); |
8 |
}
|
9 |
}
|
Nesta demonstração, usamos um para 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, ligaremos para o createSnow função assim que nossa página for carregada usando o ouvinte de evento load.
1 |
window.addEventListener("load", () => { |
2 |
createSnow(30) |
3 |
});
|
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.
1 |
const removeSnow = () => { |
2 |
snowContainer.style.opacity = "0"; |
3 |
setTimeout(() => { |
4 |
snowContainer.remove() |
5 |
}, 500) |
6 |
}
|
Nesta função, atribuímos ao nosso snowContainer uma opacidade de 0 para permitir que ele desapareça suavemente e então, após meio segundo, removemos o contêiner usando o .remove() método.
Podemos então escolher chamar esta função da maneira que quisermos. Podemos remover a neve quando o usuário clicar em qualquer lugar da página:
1 |
window.addEventListener("click", () => { |
2 |
removeSnow() |
3 |
});
|
Ou podemos incluí-lo na função setTimeout() para que desapareça após um certo período de tempo:
1 |
window.addEventListener("load", () => {
|
2 |
createSnow(30) |
3 |
setTimeout(removeSnow, 10000) |
4 |
}); |
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 até mesmo Nyan Cat animado:
Espero que você tenha gostado deste tutorial animado de neve e que tenha feito você se sentir bem e festivo!
Mais tutoriais de neve invernal e animados
