O Natal está chegando e, com ele, as decorações começam a tomas conta de cidades, redes sociais, sites e etc. É o que chamam de 'espírito natalino', talvez motivados pelo filme 'Esqueceram de Mim', ou a maioria dos filmes de Hollywood sobre o natal. Apesar que, no Brasil, o natal é em época de veraneio, onde em alguns lugares é calor e sol (como o litoral) e em outros é de chuvas intensas (como na região amazônica).

No entanto, decorar nosso site/blog, mesmo que com algo que não é cultural nosso, não é crime. E eu vou mostrar pra você como você pode facilmente adicionar um efeito de neve ao blog nessa época de natal, para que quando um internauta acesse, ele possa deslumbrar dos pequenos flocos caindo. Vamos lá?

Mas antes: Participe do nosso canal no Telegram ou grupo no WhatsApp para receber atualizações do blog e canal no Youtube.

Passo a passo

Acesse o painel do Blogger
Vá para Layout
No rodapé, crie um widget HTML/Javascript

Copie o código abaixo, cole dentro do widget e salve.


<style>
/* Container da neve */
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* não atrapalha cliques no site */
  overflow: hidden;
  z-index: 9999;
}

/* Estilo dos flocos */
.snowflake {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: fall linear infinite;
}

/* Animação de queda + vento */
@keyframes fall {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(var(--drift, 50px)) translateY(100vh);
    opacity: 0.2;
  }
}
</style>

<div class="snow-container"></div>

<script>
(function () {
  const container = document.querySelector('.snow-container');
  const flakeCount = 50; // quantidade de flocos

  for (let i = 0; i < flakeCount; i++) {
    const flake = document.createElement('div');
    flake.classList.add('snowflake');

    // posição inicial aleatória
    flake.style.left = Math.random() * 100 + 'vw';
    flake.style.animationDuration = 5 + Math.random() * 5 + 's'; // velocidade
    flake.style.animationDelay = Math.random() * 10 + 's';

    // drift (desvio horizontal) aleatório
    flake.style.setProperty('--drift', (Math.random() * 200 - 100) + 'px');

    // tamanho aleatório
    const size = Math.random() * 4 + 4;
    flake.style.width = size + 'px';
    flake.style.height = size + 'px';
    flake.style.opacity = Math.random();

    container.appendChild(flake);
  }
})();
</script>