Снег на JavaScript

Хоть новый год уже наступил, но праздники ещё идут, так что это отличный повод запустить снег на вашем сайте. Сам снег реализован с помощью canvas и работает намного лучше чем известные аналоги.

Автор . Дата: 05.01.2015

А вот и код скрипта:

window.addEventListener('load', function () {
  window.requestAnimFrame =
  window.requestAnimationFrame       ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame    ||
  window.oRequestAnimationFrame      ||
  window.msRequestAnimationFrame     ||
  function(c){setTimeout(c, 1000 / 60);};

  var canvas = document.createElement('canvas'),
    animationTimer;

  function snow() {
    var img = document.createElement('img');
    img.src = '/images/snowflake.gif';

    var ctx = canvas.getContext("2d");
    ctx.globalAlpha = 0.8;
    canvas.id = 'show-field';

    var W = canvas.width = window.innerWidth;
    var H = canvas.height = window.innerHeight;

    var mp = 40; // Кол-во снежинок

    var particles = [];
    for (var i = 0; i < mp; i++) {
      particles.push({
        x: Math.random()*W,
        y: Math.random()*H,
        r: 5 + Math.random()*4,
        d: Math.random()*mp
      });
    }

    function draw() {
      ctx.clearRect(0, 0, W, H);
      for (var i = 0, p; p = particles[i]; i++)
        ctx.drawImage(img, p.x, p.y, p.r, p.r);
      ctx.fill();
    }

    var angle = 0;
    function update() {
      angle += 0.01;
      for (var i = 0, p; p = particles[i]; i++) {
        p.y += Math.cos(angle+p.d) + 1 + p.r/2;
        p.x += Math.sin(angle) * 2;

        if (p.x < -5)
          particles[i].x = W + 5;
        else if (p.x > W + 5)
          particles[i].x = -5;
        else if (p.y > H)
          particles[i].y = -10;
      }
      window.requestAnimFrame(draw);
    }

    img.onload = function () {
      animationTimer = setInterval(update, 24);
    };

    document.body.appendChild(canvas);

    document.addEventListener('visibilitychange', function () {
      if (document.visibilityState === 'visible') {
        animationTimer = setInterval(update, 24);
        document.body.appendChild(canvas);
      } else {
        clearInterval(animationTimer);
        document.body.removeChild(canvas);
      }
    })
  };
  
  snow();
});

В переменной mp указывается кол-во снежинок которые будут отображаться на экране. Так же нужно настроить стили для блока снежинок:

#show-field {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483647;
  pointer-events: none;
}

Вы можете так же немного затемнить экран добавив background: rgba(33,33,33,0.1); Это сделает снег более выразительным на сайтах, на которых преобладают светлые тона. Скачать архив с скриптом и необходимыми файлами вы можете по ссылке ниже. Приятного использования.