EffectHub.com: your best source for gaming

Recommendation

More Effects...

/* CONFIG HERE */
var chars = ["0", "1"];
var fontsize = 20;
var subreddits = ["worldnews"];
var displayTime = 1000 * 10;
var typeDelay = 25;
/* END OF CONFIG */

function getRandomInt(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
}

(function() {
		var lastTime = 0;
		var vendors = ['ms', 'moz', 'webkit', 'o'];
		for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
				window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
				window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
		}

if (!window.requestAnimationFrame)
				window.requestAnimationFrame = function(callback, element) {
						var currTime = new Date().getTime();
						var timeToCall = Math.max(0, 16 - (currTime - lastTime));
						var id = window.setTimeout(function() {
										callback(currTime + timeToCall);
								},
								timeToCall);
						lastTime = currTime + timeToCall;
						return id;
				};

if (!window.cancelAnimationFrame)
				window.cancelAnimationFrame = function(id) {
						clearTimeout(id);
				};
}());

var c, c2, cwidth, cheight, ctx, ctx2;
var yPositions = new Array(300).join(0).split('');

function draw() {
		ctx.shadowColor = "rgba(0,0,0,0)";
		ctx.fillStyle = 'rgba(0,0,0,.05)';
		ctx.fillRect(0, 0, cwidth, cheight);

/*
		    ctx2.clearRect(0,0,c2.width,c2.height);
		    ctx2.drawImage(c, 0,0);
		    ctx.clearRect(0,0,c.width,c.height);
		    ctx.globalAlpha = 0.95;
		    ctx.drawImage(c2,0,0);
		*/

ctx.fillStyle = '#d3ffd3';
		ctx.shadowColor = "#d3ffd3";
		if ($('body').hasClass('loaded')) {
				ctx.fillStyle = '#00e700';
				ctx.shadowColor = "#00e700";
		}

if ($('body').hasClass('failure')) {
				ctx.fillStyle = '#e70000';
				ctx.shadowColor = "#e70000";
		}
		ctx.font = '20pt Source Code Pro';
		ctx.shadowOffsetX = 0;
		ctx.shadowOffsetY = 0;
		ctx.shadowBlur = 10;

yPositions.map(function(y, index) {
				var text = chars[getRandomInt(0, chars.length - 1)];
				var x = (index * fontsize) + fontsize;
				c.getContext('2d').fillText(text, x, y);
				if (y > 100 + Math.random() * 1e4) {
						yPositions[index] = 0;
				} else {
						yPositions[index] = y + fontsize;
				}
		});

}

var fetchAtOnce = 100;
var titles = [];
var lastpost;
var errorthrown = false;
var fetchrunning = false;
var cTitle = "";
var lastType;
var lastNews = 0;
var msgBox;

function renderText() {

if (Date.now() - lastType < typeDelay) {
				return;
		}
		lastType = new Date();
		if (cTitle.length === 0) { //either we're happily displaying or currently removing old news
				if (msgBox.html().length === 1) { //let's insert a new text!
						cTitle = titles[0];
						if (cTitle.length === 0) {
								errorthrown = true;
								return;
						}
						titles.splice(0, 1);
						lastNews = new Date();
				} else { //remove old text
						if (Date.now() - lastNews > displayTime) {
								var before = msgBox.html();
								msgBox.html(msgBox.html().substring(0, msgBox.html().length - 2) + '_');
								if (before === msgBox.html()) {
										msgBox.html(msgBox.html().substring(0, msgBox.html().length - 5));
								}
						}
				}
		} else { //seems we need to wait OR add to the title
				if (cTitle.length > 0) {
						msgBox.html(msgBox.html().substr(0, msgBox.html().length - 1) + cTitle[0] + '_');
						cTitle = cTitle.slice(1);
				}
		}
}

var fpslock = 30;
var lastloop = 0;
var isLoading = true;
var isActive = false;

requestAnimationFrame(mainLoop);
}

$(document).ready(function() {
		c = $('#c').get(0);
		$('#c').css('height', $(window).height());
		$('#c').css('width', $(window).width());
		cwidth = c.width = $('body').width();
		cheight = c.height = $('body').height();
		ctx = c.getContext('2d');
		c2 = document.createElement('canvas');
		c2.width = c.width;
		c2.height = c.height;
		ctx2 = c2.getContext('2d');
		msgBox = $('.msgbox span');

$('.loading').addClass('flex');
		mainLoop();
		setTimeout(function() {
				isActive = true;
		}, 3000);
});

$('body').one('click', function() {
		errorthrown = true;
});

CSS

html, body, canvas {
  font-family: monospace;
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body > div, body canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

canvas {
  z-index: 10;
  opacity: 0.8;
}

.flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.effects {
  z-index: 100;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAQAAAD41K0JAAAADklEQVQI12Ng+A+EQAQADfsC/pD7Z48AAAAASUVORK5CYII=);
  background-repeat: repeat;
  opacity: 0.1;
  pointer-events: none;
}

.overlays {
  z-index: 50;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.overlays .loading, .overlays .error, .overlays .msgbox {
  width: 400px;
  height: 140px;
  border: 7px solid;
  display: none;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Ubuntu Mono";
  font-weight: 600;
  font-size: 55px;
  letter-spacing: 5px;
  -webkit-animation: msgopen ease-in-out 1;
          animation: msgopen ease-in-out 1;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.overlays .loading {
  color: #00e700;
  border-color: rgba(0, 231, 0, 0.8);
  background: rgba(0, 66, 0, 0.85);
  text-shadow: 0 0 10px #00e700;
  box-shadow: 0 0 20px rgba(0, 231, 0, 0.7);
}
.overlays .loading span {
  -webkit-animation: loadingblink 1.5s linear infinite;
          animation: loadingblink 1.5s linear infinite;
}
.overlays .error {
  color: #e70000;
  border-color: rgba(231, 0, 0, 0.8);
  background: rgba(66, 0, 0, 0.85);
  text-shadow: 0 0 10px #e70000;
  box-shadow: 0 0 20px rgba(231, 0, 0, 0.7);
}
.overlays .error span {
  -webkit-animation: errorblink 2s linear infinite;
          animation: errorblink 2s linear infinite;
}
.overlays .msgbox {
  color: #d3ffd3;
  border-color: rgba(211, 255, 211, 0.8);
  background: rgba(45, 81, 45, 0.85);
  text-shadow: 0 0 10px rgba(211, 255, 211, 0.8);
  box-shadow: 0 0 20px rgba(211, 255, 211, 0.5);
  width: 500px;
  height: auto;
  min-height: 50px;
  padding: 20px 25px;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: initial;
  overflow: hidden;
}
.overlays .msgbox span {
  word-wrap: break-word;
  position: relative;
            /*&::before {
                content:'> ';
            }
            &::after {
                content:'_';
                animation:hardblink 1s linear infinite;
            }
					*/
}

@-webkit-keyframes loadingblink {
  0% {
    color: rgba(0, 231, 0, 0.6);
    text-shadow: 0 0 6px rgba(0, 231, 0, 0.6);
  }
  50% {
    color: #00e700;
    text-shadow: 0 0 10px #00e700;
  }
  100% {
    color: rgba(0, 231, 0, 0.6);
    text-shadow: 0 0 6px rgba(0, 231, 0, 0.6);
  }
}

@keyframes loadingblink {
  0% {
    color: rgba(0, 231, 0, 0.6);
    text-shadow: 0 0 6px rgba(0, 231, 0, 0.6);
  }
  50% {
    color: #00e700;
    text-shadow: 0 0 10px #00e700;
  }
  100% {
    color: rgba(0, 231, 0, 0.6);
    text-shadow: 0 0 6px rgba(0, 231, 0, 0.6);
  }
}
@-webkit-keyframes errorblink {
  0% {
    color: rgba(231, 0, 0, 0.8);
    text-shadow: 0 0 8px rgba(231, 0, 0, 0.8);
  }
  50% {
    color: #e70000;
    text-shadow: 0 0 10px #e70000;
  }
  100% {
    color: rgba(231, 0, 0, 0.8);
    text-shadow: 0 0 8px rgba(231, 0, 0, 0.8);
  }
}
@keyframes errorblink {
  0% {
    color: rgba(231, 0, 0, 0.8);
    text-shadow: 0 0 8px rgba(231, 0, 0, 0.8);
  }
  50% {
    color: #e70000;
    text-shadow: 0 0 10px #e70000;
  }
  100% {
    color: rgba(231, 0, 0, 0.8);
    text-shadow: 0 0 8px rgba(231, 0, 0, 0.8);
  }
}
@-webkit-keyframes msgopen {
  0% {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  1% {
    -webkit-transform: scale(0, 0.01);
            transform: scale(0, 0.01);
  }
  60% {
    -webkit-transform: scale(1, 0.01);
            transform: scale(1, 0.01);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes msgopen {
  0% {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
  }
  1% {
    -webkit-transform: scale(0, 0.01);
            transform: scale(0, 0.01);
  }
  60% {
    -webkit-transform: scale(1, 0.01);
            transform: scale(1, 0.01);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes hardblink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hardblink {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
::-moz-selection {
  background: rgba(255, 255, 255, 0.05);
}
::selection {
  background: rgba(255, 255, 255, 0.05);
}

HTML

Recommendation

Join Effecthub.com