404 noise page
HTML
<canvas id="world"></canvas>
<div id="display">404</div>
<div id="title">404 Not Found...</div>
CSS
body {
overflow:hidden;
}
canvas {
position:absolute;
left:0;top:0;
}
#display {
position:absolute;
right:5px;
top:5px;
color:#000;
text-shadow:
1px 0px #fff,
-1px 0px #fff,
0px 1px #fff,
0px -1px #fff;
}
#title {
margin:0;
padding:0.2em;
position:absolute;
left:5px;
bottom:5px;
background:rgba(255,255,255,0.5);
display:block;
font-size:10px;
}
ul {
margin:0;
padding:0.2em;
position:absolute;
left:5px;
bottom:5px;
background:rgba(255,255,255,0.5);
}
ul > li {
display:inline;
font-size:12px;
}
JavaScript
// forked from mitsu322's "forked: forked from: テレビの砂嵐" http://jsdo.it/mitsu322/uy2P
// forked from mitsu322's "forked: forked from: テレビの砂嵐" http://jsdo.it/mitsu322/tQGv
// forked from gct256's "forked from: テレビの砂嵐" http://jsdo.it/gct256/FjKl
// forked from hakobera's "テレビの砂嵐" http://jsdo.it/hakobera/nZe4
var world = document.getElementById('world');
var world_cx = world.getContext('2d');
var world_w, world_h;
var display = document.getElementById('display');
var rgb = document.getElementById('rgb');
var interlace = document.getElementById('interlace');
var cv = document.createElement('canvas');
var cx = cv.getContext('2d');
var cw = cv.width = 100;
var ch = cv.height = 100;
var dt = cx.createImageData(cw, ch);
var dd = dt.data, dl = dt.width * dt.height;
var j = 0;
var status = "subindo";
function generateNoise() {
var p = 0, i = 0;
if(j == 230){
status = "descendo";
}
if(j==25){
status="subindo"
}
if(status == "subindo"){
for (; i < dl; ++i) {
dd[p++] = c = Math.floor(Math.random() * j);
dd[p++] = c;
dd[p++] = c;
dd[p++] = 255;
}
++j;
}else if(status=="descendo"){
for (; i < dl; ++i) {
dd[p++] = c = Math.floor(Math.random() * j);
dd[p++] = c;
dd[p++] = c;
dd[p++] = 255;
}
--j;
}
cx.putImageData(dt, 0, 0);
}
function resize() {
var w = window.innerWidth;
var h = window.innerHeight;
world_w = world.width = w >> 1;
world_h = world.height = h >> 1;
world.style.width = w + 'px';
world.style.height = h + 'px';
}
resize();
window.addEventListener('resize', resize, false);
window.addEventListener('load', function() {
var s = +new Date;
generateNoise();
world_cx.fillStyle = world_cx.createPattern(cv, 'repeat');
world_cx.fillRect(0, 0, world_w, world_h);
setTimeout(arguments.callee, 20);
}, false);