404 TV Effect

HTML

<div class="frame">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="caps">
    <img src="http://ademilter.com/caps.png" alt="">
</div>
<canvas id="canvas"></canvas>
<!--orjinal page http://ademilter.com/asdfghjkl -->

CSS

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    overflow: hidden;
}
canvas {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.caps {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: as 8s linear infinite;
}
.caps img {
    display: block;
    width: 100%;
    height: 100%;
}
@keyframes as {
    0% {
        opacity: 0;
    }
    10% {
        opacity: .3;
    }
    20% {
        opacity: .1;
    }
    30% {
        opacity: .5;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: .8;
    }
    55% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
}
.frame {
    z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#e6000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}
.frame div {
   ...

JavaScript

// js source http://codepen.io/moklick/pen/zKleC  

var Application = (function () {
    var canvas;
    var ctx;
    var imgData;
    var pix;
    var WIDTH;
    var HEIGHT;
    var flickerInterval;

    var init = function () {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.width = WIDTH = 700;
        canvas.height = HEIGHT = 500;
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
        ctx.fill();
        imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
        pix = imgData.data;
        flickerInterval = setInterval(flickering, 30);
    };

    var flickering = function () {
        for (var i = 0; i < pix.length; i += 4) {
            var color = (Math.random() * 255) + 50;
            pix[i] = color;
            pix[i + 1] = color;
            pix[i + 2] = color;
        }
        ctx.putImageData(imgData, 0, 0);
    };

    return {
        init: init
    };
}());

Application.init();