Se você deseja adicionar um toque mágico ao seu site, especialmente durante as festas de fim de ano, um efeito de flocos de neve é uma escolha incrível! Neste tutorial, vamos aprender a criar um efeito dinâmico e encantador usando HTML , CSS e JavaScript , com o auxílio da biblioteca jQuery para simplificar a manipulação de elementos na página.
Estrutura do Projeto
Antes de começarmos, veja como será a organização dos arquivos do projeto:
/Flocos-de-Neve │ ├── index.html (Estrutura HTML) ├── style.css (Estilização da página) └── script.js (Animação dos flocos de neve)
Certifique-se de ter um editor de código instalado, como o VS Code ou o Sublime Text , para editar os arquivos.
Veja o Flocos de Neve em funcionamento neste link. Flocos de Neve.
Veja o vídeo no YouTube:
Passo 1: Criando a Estrutura HTML
O primeiro passo é configurar o arquivo index.html, que servirá como base para carregar os estilos e o script de animação.
Código HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flocos de Neve</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Detalhes Importantes
- Biblioteca jQuery: Usamos um link CDN para carregar o jQuery diretamente na página.
- Referência de Estilo: O arquivo
style.cssé específico para estilizar a página. - Script de Animação: O
script.jsserá carregado para criar os flocos de neve e gerenciar a lógica do movimento.
Passo 2: Estilizando o Fundo
Agora, vamos criar o arquivo style.css que define o visual básico da página. Para este tutorial, usaremos um fundo vermelho natalino, mas você pode personalizar conforme desejar.
Código CSS
body {
background: #e80707; /* Fundo vermelho vibrante */
margin: 0;
padding: 0;
overflow: hidden; /* Garante que os flocos não causem rolagem */
font-family: Arial, sans-serif;
}
Explicação
background: Define o fundo da página.
overflow: hidden;Evita barras de rolagem quando os flocos ultrapassam os limites da janela.
Você pode substituir o vermelho por outras cores ou até mesmo usar um gradiente para simular um céu noturno. Exemplo:
background: linear-gradient(to bottom, #1e3c72, #2a5298);
Passo 3: Criando os Flocos de Neve
Agora é hora de adicionar vida ao nosso projeto, escrevendo o código JavaScript responsável por animar os flocos. Crie um arquivo chamado script.js e adicione o seguinte código:
Código JavaScript
(function($) {
var ww = 0;
var wh = 0;
var maxw = 0;
var minw = 0;
var maxh = 0;
var textShadowSupport = true;
var xv = 0;
var snowflakes = ["❄", "❅", "❆"];
var prevTime;
var absMax = 200;
var flakeCount = 0;
$(init);
function init() {
var detectSize = function() {
ww = $(window).width();
wh = $(window).height();
maxw = ww + 300;
minw = -300;
maxh = wh + 300;
};
detectSize();
$(window).resize(detectSize);
if (!$('body').css('textShadow')) {
textShadowSupport = false;
}
var i = 50;
while (i--) {
addFlake(true);
}
prevTime = new Date().getTime();
setInterval(move, 50);
}
function addFlake(initial) {
flakeCount++;
var sizes = [{
r: 1.0,
css: {
fontSize: 15 + Math.floor(Math
.random() * 20) + 'px',
textShadow: '9999px 0 0 rgba(238, 238, 238, 0.5)'
},
v: 2
},
{
r: 0.6,
css: {
fontSize: 50 + Math.floor(Math
.random() * 20) + 'px',
textShadow: '9999px 0 2px #eee'
},
v: 6
},
{
r: 0.2,
css: {
fontSize: 90 + Math.floor(Math
.random() * 30) + 'px',
textShadow: '9999px 0 6px #eee'
},
v: 12
},
{
r: 0.1,
css: {
fontSize: 150 + Math.floor(Math
.random() * 50) + 'px',
textShadow: '9999px 0 24px #eee'
},
v: 20
}
];
var $nowflake = $(
'' +
snowflakes[Math.floor(Math
.random() * snowflakes.length)] +
'').css({
color: '#eee',
display: 'block',
position: 'fixed',
background: 'transparent',
width: 'auto',
height: 'auto',
margin: '0',
padding: '0',
textAlign: 'left',
zIndex: 9999
});
if (textShadowSupport) {
$nowflake.css('textIndent',
'-9999px');
}
var r = Math.random();
var i = sizes.length;
var v = 0;
while (i--) {
if (r < sizes[i].r) {
v = sizes[i].v;
$nowflake.css(sizes[i].css);
break;
}
}
var x = (-300 + Math.floor(Math
.random() * (ww + 300)));
var y = 0;
if (typeof initial == 'undefined' ||
!initial) {
y = -300;
} else {
y = (-300 + Math.floor(Math
.random() * (wh + 300)));
}
$nowflake.css({
left: x + 'px',
top: y + 'px'
});
$nowflake.data('x', x);
$nowflake.data('y', y);
$nowflake.data('v', v);
$nowflake.data('half_v', Math.round(
v * 0.5));
$('body').append($nowflake);
}
function move() {
if (Math.random() > 0.8) {
xv += -1 + Math.random() * 2;
if (Math.abs(xv) > 3) {
xv = 3 * (xv / Math.abs(xv));
}
}
var newTime = new Date().getTime();
var diffTime = newTime - prevTime;
prevTime = newTime;
if (diffTime < 55 && flakeCount <
absMax) {
addFlake();
} else if (diffTime > 150) {
$('span.winternetz:first')
.remove();
flakeCount--;
}
$('span.winternetz').each(
function() {
var x = $(this).data('x');
var y = $(this).data('y');
var v = $(this).data('v');
var half_v = $(this).data(
'half_v');
y += v;
x += Math.round(xv * v);
x += -half_v + Math.round(Math
.random() * v);
if (x > maxw) {
x = -300;
} else if (x < minw) {
x = ww;
}
if (y > maxh) {
$(this).remove();
flakeCount--;
addFlake();
} else {
$(this).data('x', x);
$(this).data('y', y);
$(this).css({
left: x + 'px',
top: y + 'px'
});
if (v >= 6) {
$(this).animate({
rotate: '+=' + half_v +
'deg'
}, 0);
}
}
}
);
}
})(jQuery);
Explicação do Código
- Inicialização (
init): Detecta o tamanho da janela e cria os flocos iniciais. - Criação de Flocos (
addFlake): Define o formato, posição, tamanho e velocidade dos flocos. - Movimento dos Flocos (
move): Atualiza a posição de cada floco e remove os que saíram da tela.
Passo 4: Testando o Projeto
Agora que todos os arquivos estão prontos, é hora de ver o projeto em ação!
- Salve os arquivos
index.html,style.cssescript.jsna mesma pasta. - Abra o arquivo
index.htmlno navegador. - Assista à magia dos flocos de neve caindo na tela!
Personalizações Avançadas
Para tornar o projeto ainda mais interessante, experimente as seguintes ideias:
Alterar o Formato dos Flocos
Substitua os símbolos padrão por outros caracteres ou até as mesmas imagens. Exemplo:
var snowflakes = ["★", "❀", "✿"];
Adicionar Animações
Use animações CSS para girar ou pulsar os flocos:
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } span { animation: spin 5s linear infinite; }
Integrar com Interatividade
Faça os flocos desaparecerem ao serem clicados:
$('span').on('click', function() { $(this).fadeOut(); });
Conclusão
Com este tutorial, você aprendeu a criar um efeito visual impressionante usando apenas HTML, CSS e JavaScript. Este projeto é uma ótima introdução à manipulação de elementos DOM e criação de animações.
Se preferir, os códigos estão no meu Repositório no GitHub.
Se você gostou deste efeito, experimente integrá-lo em outros projetos para impressionar seus visitantes!
Deixe suas dúvidas ou sugestões nos comentários e compartilhe o tutorial com amigos desenvolvedores!
Comentários
Postar um comentário
Obrigado pelo seu feedback!