Анимированный фон для сайта или страниц

<canvas id="vkedsam-gedumilag"></canvas>

#vkedsam-gedumilag {  
background:#3d67b5;
width:100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#vkedsam-gedumilag:hover {  
background:#2c578c;
}

(function() {

  var width, height, canvas, ctx, circles, target, animateHeader = true;

  initHeader();
  addListeners();

  function initHeader() {
  width = window.innerWidth;
  height = window.innerHeight;
  target = {x: 0, y: height};

  canvas = document.getElementById('vkedsam-gedumilag');
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext('2d');

  circles = [];
  for(var x = 0; x < width*0.9; x++) {
  var c = new Circle();
  circles.push(c);
  }
  animate();
  }

  function addListeners() {
  window.addEventListener('scroll', scrollCheck);
  window.addEventListener('resize', resize);
  }

  function scrollCheck() {
  if(document.body.scrollTop > height) animateHeader = false;
  else animateHeader = true;
  }

  function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  }

  function animate() {
  if(animateHeader) {
  ctx.clearRect(0,0,width,height);
  for(var i in circles) {
  circles[i].draw();
  }
  }
  requestAnimationFrame(animate);
  }

  function Circle() {
  var _this = this;

  (function() {
  _this.pos = {};
  init();
  console.log(_this);
  })();

  function init() {
  _this.pos.x = Math.random()*width;
  _this.pos.y = height+Math.random()*100;
  _this.alpha = 0.1+Math.random()*0.9;
  _this.scale = 0.1+Math.random()*0.9;
  _this.velocity = Math.random();
  }

  this.draw = function() {
  if(_this.alpha <= 0) {
  init();
  }
  _this.pos.y -= _this.velocity;
  _this.alpha -= 0.0005;
  ctx.beginPath();
  ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'rgba(157,188,225,'+ _this.alpha+')';
  ctx.fill();
  };
  }

})();

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>

<canvas id="kepogsevcam"></canvas>

#kepogsevcam {  
background:#5089d0;
width:100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#kepogsevcam:hover {  
background:#3e70ad;
}

$(function () {
  var lines = document.getElementById('kepogsevcam');
  lines.width = window.innerWidth;
  lines.height = window.innerHeight;
  });

$(function () { var e, t, n, r, i = [], s, o, u = 10; n = $("#kepogsevcam")[0]; r = n.getContext("2d"); s = window.innerWidth; o = window.innerHeight; r.strokeStyle = "#a3c3e8"; r.lineWidth = .1; for (e = 0; e < 4 * u; e += 1) { i.push({ x: Math.random() * s, y: Math.random() * o, vx: Math.random() * 4 - 2, vy: Math.random() * 4 - 2 }) } var a = 0; setInterval(function () { if (a <= 3e4) { for (t = 0; t < u; t += 1) { r.beginPath(); r.moveTo(i[t * 4].x, i[t * 4].y); r.bezierCurveTo(i[t * 4 + 1].x, i[t * 4 + 1].y, i[t * 4 + 2].x, i[t * 4 + 2].y, i[t * 4 + 3].x, i[t * 4 + 3].y); r.stroke() } for (e = 0; e < i.length; e += 1) { i[e].y += i[e].vx; i[e].x += i[e].vy; a++ } } else { clearInterval(setInterval) } }, 1e3 / 24) })