Falling Snowflakes, Bring Christmas Spirit to Bearblog 🎄

03 Dec, 2025

Just a heads-up, I’m really not great with code, and this isn’t entirely my own work some parts I grabbed from the web. I just felt like sharing it.

Last night I was looking for a cute way to give my homepage and the blog a more festive Christmas vibe, while keeping the current raw style of the site I like it just the way it is.

I came across this really fun script that makes little snowflakes fall from the top of the page, and I wanted to share the code with other Bearblog users. If you want to use it too, go ahead I’d be happy! Just don’t forget to give the post an upvote.

Happy holidays to everyone!!! 🎄❄️

<script>
  const numFlakes = 50;
  const colors = ['#e0f7ff', '#cceeff', '#f8f8f8'];
  const body = document.body;

  for (let i = 0; i < numFlakes; i++) {
    const f = document.createElement('span');
    f.innerText = '❄';
    f.style.position = 'absolute';
    f.style.fontSize = (12 + Math.random() * 18) + 'px';
    f.style.left = Math.random() * window.innerWidth + 'px';
    f.style.top = Math.random() * -window.innerHeight + 'px';
    f.style.color = colors[Math.floor(Math.random() * colors.length)];
    f.style.opacity = 0.7 + Math.random() * 0.3;
    f.style.pointerEvents = 'none';
    body.appendChild(f);

    const speed = 0.5 + Math.random() * 1.5;
    const sway = Math.random() * 20;

    (function animate(flake, spd, swayAmount) {
      let y = parseFloat(flake.style.top);
      let x = parseFloat(flake.style.left);
      let swayPhase = Math.random() * Math.PI * 2;

      function step() {
        y += spd;
        swayPhase += 0.02;
        flake.style.top = y + 'px';
        flake.style.left = x + Math.sin(swayPhase) * swayAmount + 'px';

        if (y > window.innerHeight) {
          y = -20;
          x = Math.random() * window.innerWidth;
        }

        requestAnimationFrame(step);
      }
      step();
    })(f, speed, sway);
  }
</script>

What the code does

• It creates 50 snowflakes (numFlakes = 50).
• Each snowflake is a <span> containing the ❄ character.

The snowflakes:

• Are positioned absolutely on the screen (position: absolute).
• Have a random size between 12 and 30px.
• Have random colors chosen from an array (colors).
• Have a random opacity between 0.7 and 1.
• Include a falling effect with a slight sway using requestAnimationFrame.
• Each snowflake falls vertically (y += spd) and sways side to side (x + Math.sin(...) * swayAmount).
• When a snowflake reaches the bottom of the window, it starts again from the top with a new random horizontal position.

Simply paste this code at the top or bottom of your post, and watch your homepage come alive with delicate snowflakes.

Just a quick reminder at the bottom of the page there’s a little button with two arrows pointing up.
If you click it, you’ll be doing me a huge favor <3

Thanks again, everyone 🫶🏻

#bearblog #code #coding #javascript #script