My blog header canvas animation

header.js

(function(){

if(!document.createElement('canvas').getContext)
return; // canvas is required.

var requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var $ = jQuery;

var BannerAnimate = function() {
var canvas = null;
var ctx = null;
var pause = false;
var lineCount = 5;

var date = new Date().getTime();
var render = function() {
  if(pause)
    return;
  var now = new Date().getTime();
  var i = (now - date)/50;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for(var j=0; j<lineCount; ++j) {
    ctx.lineWidth = 1+2*(lineCount-j);
    ctx.strokeStyle = 'rgba('+Math.floor(Math.abs(Math.cos(i/80)*256))+',220,255,'+(j/10+0.05)+')';
    var offset = (i+j*10*Math.abs(Math.cos(i/100)))/20;
    var y = (Math.sin(offset)+1)*canvas.height/2;
    var cpy1 = (Math.cos(offset)+0.5)*canvas.height;
    var cpy2 = canvas.height - cpy1;
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.bezierCurveTo(canvas.width/3, cpy1, 2*canvas.width/3, cpy2, canvas.width, y);
    ctx.stroke();
  }
  i++;
};

return {
  init: function() {
    var node = $('<canvas/>').attr('width', '1000').attr('height', '90');
    canvas = node[0];
    ctx = canvas.getContext('2d');
    
    $('<div id="binaryBanner"/>').css({
      'position': 'absolute',
      'z-index': 0,
      'padding': '0'
    }).append(node).prependTo('#header');
    
    $('#header .description').css('z-index', '1');
    
    $(window).scroll(function(){
      pause = $().scrollTop()>200; // Pause if banner is not visible
    });

    (function animloop(){
      requestAnimFrame(animloop, canvas);
      render();
    })();
  }
}
}();

$(document).ready(BannerAnimate.init);
}());