Loading Monky

by Denis Tverdokhlebov

HTML

<script src="http://codepen.io/ajerez/pen/PqbdWK"></script>
<div class="glitch" data-text="LOADING">LOADING</div>

SCSS

$color1: #1F3944;

* { 
    margin:0; padding:0; 
}
body { 
    background : $color1; 
    font-size: 20px;
    font-weight: 300;
}

canvas { 
  position : absolute;
  top      : 0;
  right    : 0;
  bottom   : 0;
  left     : 0;
  margin   : auto;
}

.glitch {
  color: white;
  font-size: 40px;
  font-weight: 300;
  width: 173px;
  height: 55px;
  font-family: 'Open Sans', sans-serif;
  position : absolute;
  top      : 0;
  right    : 0;
  bottom   : 0;
  left     : 0;
  margin   : auto;
    transform: translateY(80px);
}

@keyframes noise-anim {
  0% {
    clip: rect(23px, 9999px, 17px, 0);
  }
  5% {
    clip: rect(34px, 9999px, 24px, 0);
  }
  10% {
    clip: rect(34px, 9999px, 9px, 0);
  }
  15.0% {
    clip: rect(20px, 9999px, 22px, 0);
  }
  20% {
    clip: rect(5px, 9999px, 18px, 0);
  }
  25% {
    clip: rect(15px, 9999px, 35px, 0);
  }
  30.0% {
    clip: rect(26px, 9999px, 36px, 0);
  }
  35% {
    clip: rect(26px, 9999px, 33px, 0);
  }
  40% {
    clip: rect(26px, 9999px, 5px, 0);
  }
  45% {
    clip: rect(13px, 9999px, 28px, 0);
  }
  50% {
    clip: rect(29px, 9999px, 38px, 0);
  }
  55.0% {
    clip: rect(30px, 9999px, 13px, 0);
  }
  60.0% {
    clip: rect(7px, 9999px, 36px, 0);
  }
  65% {
    clip: rect(28px, 9999px, 14px, 0);
  }
  70% {
    clip: rect(15px, 9999px, 16px, 0);
  }
  75% {
    clip: rect(8px, 9999px, 8px, 0);
  }
  80% {
    clip: rect(39px, 9999px, 2px, 0);
  }
  85.0% {
    clip: rect(20px, 9999px, 18px, 0);
  }
  90% {
    clip: rect(27px, 9999px, 8px, 0);
  }
  95% {
    clip: rect(33px, 9999px, 14px, 0);
  }
  100% {
    clip: rect(23px, 9999px, 25px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: $color1;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(5px, 9999px, 21px, 0);
  }
  5% {
    clip:...

JavaScript

var Glitcher = (function () {
    function Glitcher(options) {
        this.canvas = document.createElement('canvas');
        this.context = this.canvas.getContext('2d');
        this.origCanvas = document.createElement('canvas');
        this.origContext = this.origCanvas.getContext('2d');
        this.options = options;
    }
    Glitcher.prototype.glitch = function (url, callback) {
        var _this = this;
        this.loadImage(url, function (img) {
            _this.renderImage(img);
            _this.process();
            callback();
        });
    };

    Glitcher.prototype.process = function () {
        var imageData = this.origContext.getImageData(0, 0, this.width, this.height), pixels = imageData.data, length = pixels.length, options = this.options, brightness, offset, i, x, y;

        for (i = 0; i < length; i += 4) {
            if (options.color) {
                pixels[i] *= options.color.red;
                pixels[i + 1] *= options.color.green;
                pixels[i + 2] *= options.color.blue;
            }

            if (options.greyscale) {
                brightness = pixels[i] * options.greyscale.red + pixels[i + 1] * options.greyscale.green + pixels[i + 2] * options.greyscale.blue;

                pixels[i] = brightness;
                pixels[i + 1] = brightness;
                pixels[i + 2] = brightness;
            }

            if (options.stereoscopic) {
                offset = options.stereoscopic.red;
                pixels[i] = (pixels[i + 4 * offset] === undefined) ? 0 : pixels[i + 4 * offset];

                offset = options.stereoscopic.green;
                pixels[i + 1] = (pixels[i + 1 + 4 * offset] === undefined) ? 0 : pixels[i + 1 + 4 * offset];

                offset = options.stereoscopic.blue;
                pixels[i + 2] = (pixels[i + 2 + 4 * offset] === undefined) ? 0 : pixels[i + 2 + 4 * offset];
            }
        }

        if (options.lineOffset) {
            i = 0;

            for (y = 0; y...