Создаем анимацию фона сайта с помощью JS

function ParticleModel(config) {
  var $scope = this;
  var MAX_SIZE = 180;
  var MIN_SIZE = 20;
  var MAX_SPEED = 120; // per second
  var MIN_SPEED = 2;
  var MAX_OPACITY = 0.5;
  var MIN_OPACITY = 0.2;
  var MAX_VECTOR = 360;
  var MIN_VECTOR = 0;
  var MAX_LIFE = 20000; // ms
  var MIN_LIFE = 5000;
  var defaults = {
  displayed: false,
  ended: false,
  size: 0,
  x: 0,
  y: 0,
  speed: 0,
  opacity: 1,
  vector: 0,
  domElement: angular.element(document.createElement('div')).addClass('particle'),
  id: undefined, // should be defined in config
  boxSize: {width: 0, height: 0}, // should be defined in config
  header: undefined, // should be defined in config
  controller: undefined // should be defined in config
  };
  $scope.config = angular.extend(defaults, config);
  var rand_range = function(min, max, round) {
  if(round === undefined) {
  return Math.floor(Math.random() * (max - min) + min);
  } else if (round === false) {
  return Math.random() * (max - min) + min;
  }
  };
  $scope.init = function() {
  $scope.config.size = rand_range(MIN_SIZE, MAX_SIZE);
  $scope.config.speed = rand_range(MIN_SPEED, MAX_SPEED);
  $scope.config.x = rand_range(0, $scope.config.boxSize.width);
  $scope.config.y = rand_range(0, $scope.config.boxSize.height);
  $scope.config.opacity = rand_range(MIN_OPACITY, MAX_OPACITY, false);
  if($scope.config.size > 100) {
  $scope.config.opacity = rand_range(0.01, 0.2, false);
  }
  $scope.config.blur = $scope.config.size / 8;
  $scope.config.vector = rand_range(MIN_VECTOR, MAX_VECTOR);
  $scope.config.xspeed = Math.cos($scope.config.vector) * $scope.config.speed;
  $scope.config.yspeed = Math.sin($scope.config.vector) * $scope.config.speed;
  var createTime = new Date().getTime();
  var expires = new Date().getTime() + rand_range(MIN_LIFE, MAX_LIFE);
  $scope.config.life = expires - createTime;
  function particleEnd() {
  if($scope.config.displayed === false) {
  $scope.config.displayed = true;
  return;
  }
  if($scope.config.ended === false) {
  $scope.config.domElement.css({
  transition: 'opacity 1s linear',
  WebkitTransition: 'opacity 1s linear',
  MozTransition: 'opacity 1s linear',
  });
  var style1 = document.querySelector('style#style-' + $scope.config.id);
  style1.innerHTML = '.animated-' + $scope.config.id + ' { opacity: 0 !important; transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; -webkit-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; -moz-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) !important; }';
  $scope.config.ended = true;
  return;
  }
  var style = document.querySelector('style#style-' + $scope.config.id);
  document.getElementsByTagName('head')[0].removeChild(style);
  $scope.config.ended = true;
  $scope.config.domElement[0].parentNode.removeChild($scope.config.domElement[0]);
  var p = new ParticleModel({
  id: $scope.config.controller.numParticles,
  boxSize: {
  width: $scope.config.header[0].offsetWidth,
  height: $scope.config.header[0].offsetHeight
  },
  header: $scope.config.header,
  controller: $scope.config.controller
  }).init();
  $scope.config.controller.numParticles++;
  $scope.config.header.append(p.config.domElement);
  }
  $scope.config.domElement[0].addEventListener('webkitTransitionEnd', particleEnd);
  $scope.config.domElement[0].addEventListener('transitionend', particleEnd);
  $scope.updateDOMStyles();
  $scope.config.x += Math.floor($scope.config.xspeed * $scope.config.life / 1000);
  $scope.config.y += Math.floor($scope.config.yspeed * $scope.config.life / 1000);
  $scope.updateXY();
  return $scope;
  };
  $scope.updateDOMStyles = function() {
  $scope.config.domElement.css({
  width: $scope.config.size + 'px',
  height: $scope.config.size + 'px',
  borderRadius: $scope.config.size/2 + 'px',
  webkitFilter: 'blur(' + $scope.config.blur + 'px)',
  filter: 'blur(' + $scope.config.blur + 'px)',
  transition: 'transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
  WebkitTransition: '-webkit-transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
  MozTransition: '-moz-transform ' + $scope.config.life/1000 + 's linear, opacity 1s linear',
  transform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)',
  webkitTransform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)',
  MozTransform: 'translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1)'
  });
  };
  $scope.updateXY = function() {
  var className = 'animated-' + $scope.config.id;
  var style = document.createElement('style');
  style.type = 'text/css';
  style.id = 'style-' + $scope.config.id;
  style.innerHTML = '.' + className + ' { opacity: ' + $scope.config.opacity + ' !important; transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; -webkit-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; -moz-transform: translate3d(' + $scope.config.x + 'px, ' + $scope.config.y + 'px, 0px) scale3d(1,1,1) !important; }';
  document.getElementsByTagName('head')[0].appendChild(style);
  setTimeout(function() {
  $scope.config.domElement.addClass(className);
  }, 100);
  };
  return $scope;
  }
  function ParticleController(config) {
  var $scope = this;
  $scope.numParticles = 0;
  var defaults = {
  numberOfParticles: 0, // should be defined in config;
  header: undefined // should be defined in config
  };
  $scope.config = angular.extend(defaults, config);
  $scope.init = function() {
  console.log($scope.config.header);
  for(var i = 0; i < $scope.config.numberOfParticles; i++) {
  var p = new ParticleModel({
  id: i,
  boxSize: {
  width: $scope.config.header[0].offsetWidth,
  height: $scope.config.header[0].offsetHeight
  },
  header: $scope.config.header,
  controller: $scope
  }).init();
  $scope.numParticles++;
  $scope.config.header.append(p.config.domElement);
  }
  };
  return $scope;
  }
var pc = new ParticleController({
  numberOfParticles: 20,
  header: angular.element(document.querySelector('.header'))
  }).init();