Falling Snow

page decoration 1997 still works

Snowflakes drift down the page. Switched on every December from 1997 onward.

In 2026: Rewritten from the <layer> / document.all original to plain divs. Same effect, runs everywhere.

Where it came from: Altan d.o.o. of altan.hr wrote the most-copied version, 1997, and its credit line survives in thousands of copies. Distributed through Dynamic Drive and reprinted by most other archives.
Wikipedia ↗Wayback: Dynamic Drive snow ↗

<!-- A dark ground for this demo only: white flakes on the sandbox's white
     background barely show. Styling html as well as body matters, because the
     flakes fall over the whole frame and the html canvas is what paints it.
     On your own page the snow falls over whatever you already have. -->
<style>html, body { background: #333 }</style>

<script language="JavaScript">
var FLAKES = 30, flakes = [];
for (var i = 0; i < FLAKES; i++) {
  var f = document.createElement("div");
  f.innerHTML = "\u2744";
  f.style.cssText = "position:fixed;top:-20px;pointer-events:none;z-index:9998;"
    + "color:#fff;text-shadow:0 0 3px #6cf";
  document.body.appendChild(f);
  flakes.push({
    el: f,
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    s: 0.6 + Math.random() * 1.6,
    r: 0.4 + Math.random() * 1.2,
    a: Math.random() * 6.28
  });
  f.style.fontSize = (8 + Math.random() * 14) + "px";
}
setInterval(function () {
  for (var i = 0; i < flakes.length; i++) {
    var f = flakes[i];
    f.y += f.s;
    f.a += 0.03;
    if (f.y > window.innerHeight) { f.y = -20; f.x = Math.random() * window.innerWidth; }
    f.el.style.left = (f.x + Math.sin(f.a) * 18) + "px";
    f.el.style.top = f.y + "px";
  }
}, 33);
</script>

sandboxed demo · breaks nothing but itselfrestart

More in page decoration