Old school snow for the website

snow.js

(function(window, document) {

  /* Modification
   * reuqestAnimationFrame polyfill   https://gist.github.com/paulirish/1579671
   * hasFocus for old Opera    if (!document.hasFocus) {document.hasFocus = function() {return true}}
   * Styling with stylesheet:
   * .snow {
   *    position: absolute;
   *    color: #fff;
   *    top: 0;
   *    left: 0;
   *    text-shadow: 0 0 1px #000;
   *    pointer-events: none;
   *  }
   **/

  var i, item, size, left, width, height;
  var snowFlakesList = [];
  var snowFlakesContainer = document.createElement('div');
  document.body.appendChild(snowFlakesContainer);

  function random(mod) {
    return Math.random() * mod;
  }

  function addSnow() {
    if (snowFlakesList.length < 20) {
      setTimeout(addSnow, 250);
      if (document.hasFocus()) {
        item = document.createElement('div');
        size = random(15) + 20;
        left = Math.round(random(0.8 * window.innerWidth));
        item.className = 'snow';
        item.textContent = '*';
        item.style.fontSize = size;
        item.style.transform = 'translate(' + left + 'px,0px)';
        /* Remove if styling with stylesheet */
        item.style.position = 'absolute';
        item.style.color = '#fff';
        item.style.top = 0;
        item.style.left = 0;
        item.style.pointerEvents = 'none';
        item.style.textShadow = '0 0 1px #000';
        snowFlakesContainer.appendChild(item);
        snowFlakesList.push({
          element: item,
          topSpeed: size / 9,
          leftSpeed: 20 / size,
          top: 0,
          left: left
        });
      }
    }
  }

  function moveSnow() {
    if (document.hasFocus()) {
      width = window.innerWidth - 20;
      height = window.innerHeight - 40;
      for (i = 0; i < snowFlakesList.length; i++) {
        item = snowFlakesList[i];
        item.top += item.topSpeed;
        if (item.top > height) {
          item.top = 0;
        }
        item.left += item.leftSpeed;
        if (item.left > width) {
          item.left = 0;
        }
        item.element.style.transform = 'translate(' + item.left + 'px,' + item.top + 'px)';
      }
    }
    requestAnimationFrame(moveSnow);
  }

  addSnow();
  requestAnimationFrame(moveSnow);

})(window, document);