Classic Web Snow Rebirth!!!

snow.js

// This JavaScript code can be freely redistributed
// as long as this copyright notice is keept unchanged.
// This code is used on AS-IS basis and
// you use it on your own risk. Author of this code
// is not responsible for any damage that this
// code may make.
//
// JS Snow v0.3
// finished on 11-10-1999 23:04 in Zagreb, Croatia.
// modified on 06-12-2005 11:20 in Zagreb, Croatia.
// modified on 06-07-2020 by tcdw <[email protected]>.
//
// Copyright 1999,2005 Altan d.o.o.
// http://www.altan.hr/snow/index.html
// E-mail: [email protected]

const no = 20; // snow number
let shouldRun = true;
let docWidth = document.documentElement.clientWidth;
let docHeight = document.documentElement.clientHeight;
const snow = [];

for (let i = 0; i < no; i += 1) {
    snow[i] = {};
    snow[i].el = document.createElement('img');
    snow[i].el.src = 'http://www.cek.ne.jp/~komakusa/SNOW.GIF';
    snow[i].el.style.position = 'fixed';
    snow[i].el.style.left = '0px';
    snow[i].el.style.top = '0px';
    snow[i].dx = 0; // set coordinate variables
    snow[i].xp = Math.random() * (docWidth - 50); // set position variables
    snow[i].yp = Math.random() * docHeight;
    snow[i].am = Math.random() * 20; // set amplitude variables
    snow[i].stx = 0.02 + Math.random() / 10; // set step variables
    snow[i].sty = 0.7 + Math.random(); // set step variables
    document.body.appendChild(snow[i].el);
}

function act() {
    if (shouldRun) {
        for (let i = 0; i < no; i += 1) { // iterate for every dot
            snow[i].yp += snow[i].sty;
            if (snow[i].yp > docHeight - 50) {
                snow[i].xp = Math.random() * (docWidth - snow[i].am - 30);
                snow[i].yp = 0;
                snow[i].stx = 0.02 + Math.random() / 10;
                snow[i].sty = 0.7 + Math.random();
                docWidth = document.documentElement.clientWidth;
                docHeight = document.documentElement.clientHeight;
            }
            snow[i].dx += snow[i].stx;
            snow[i].el.style.transform = `translate3D(${snow[i].xp + snow[i].am * Math.sin(snow[i].dx)}px, ${snow[i].yp}px, 0)`;
        }
    }
    requestAnimationFrame(act);
}
act();

function handleVisibilityChange() {
    if (document.hidden) {
        shouldRun = false;
        // document.title = 'No Snow!!!';
    } else {
        shouldRun = true;
        // document.title = 'Snow!!!';
    }
}

document.addEventListener('visibilitychange', handleVisibilityChange, false);