wofockham/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>static.</title>
  <link rel="stylesheet" href="static.css">
  <script src="static.js"></script>
</head>
<body>

  <div id="container">
    <canvas id="static" width="400" height="400"></canvas>
  </div>

</body>
</html>

## static.css
body {
  margin: 0;
  background: #320 url(http://www.thisiscolossal.com/wp-content/uploads/2013/01/4.gif) no-repeat center center fixed;
  background-size: cover;
}

canvas {
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
}

## static.js
var static = (function () {

  var brilliance = 255;
  var context;
  var imageData;
  var pixel;
  var opacity = 255;
  delta = 0.5;

  return function (canvas) {
    // Set these up just the first time.
    context = context || canvas.getContext('2d');
    imageData = imageData || context.createImageData(canvas.width, canvas.height);
    pixel = pixel || imageData.data;

    for (var i = 0; i < pixel.length; i += 4) {
      var v = Math.random() * brilliance;
      pixel[i] = pixel[i + 1] = pixel[i + 2] = v;
      //pixel[i] = pixel[i + 2] = 0;
      pixel[i + 3] = opacity;
    }

    context.putImageData(imageData, 0, 0);
    if (opacity >= 255 || opacity < 0) {
      delta *= -1; // Toggle the sign.
    }
    opacity += delta;
    requestAnimationFrame(static);
  }

})();

window.onload = function () {
  console.log('static');
  var canvas = document.getElementById('static');
  static(canvas)
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>static.</title>
	<link rel="stylesheet" href="static.css">
	<script src="static.js"></script>
	</head>
	<body>

	<div id="container">
	<canvas id="static" width="400" height="400"></canvas>
	</div>

	</body>
	</html>
	body {
	margin: 0;
	background: #320 url(http://www.thisiscolossal.com/wp-content/uploads/2013/01/4.gif) no-repeat center center fixed;
	background-size: cover;
	}

	canvas {
	margin: auto;
	display: block;
	width: 100%;
	height: 100%;
	}
	var static = (function () {

	var brilliance = 255;
	var context;
	var imageData;
	var pixel;
	var opacity = 255;
	delta = 0.5;

	return function (canvas) {
	// Set these up just the first time.
	context = context \|\| canvas.getContext('2d');
	imageData = imageData \|\| context.createImageData(canvas.width, canvas.height);
	pixel = pixel \|\| imageData.data;

	for (var i = 0; i < pixel.length; i += 4) {
	var v = Math.random() * brilliance;
	pixel[i] = pixel[i + 1] = pixel[i + 2] = v;
	//pixel[i] = pixel[i + 2] = 0;
	pixel[i + 3] = opacity;
	}

	context.putImageData(imageData, 0, 0);
	if (opacity >= 255 \|\| opacity < 0) {
	delta *= -1; // Toggle the sign.
	}
	opacity += delta;
	requestAnimationFrame(static);
	}

	})();

	window.onload = function () {
	console.log('static');
	var canvas = document.getElementById('static');
	static(canvas)
	};