JSFiddle - React, Tailwind, and code Playground

by ThiefMaster

HTML

<h1 class="c3ify" id="text1">4. FACHSCHAFTS PROGRAMMIERNACHT</h1>

	<h2 class="c3ify" id="text2">OH PLEASE, COPY MA STYLE, BIATCH!</h2>

CSS

body, html, * {
			  background-color: #060A37;
			  margin: 0px;
			  padding: 0px;
			}
			h1, h2 {
			  margin: 0px auto;
			  text-align: center;
			  color: rgb(247, 148, 51);
			  font-family: SourceCodeProLight, Arial, Monospace;
			}
			h1 {
			  font-size: 3.5em;
			  margin-bottom: 20px;
			}
			h2 {
			  font-size: 3em;
			}

JavaScript

var replacements = ['.', '-', '/', ':', ';', '(', ')', '[', ']', '{', '}'];

function start() {
  var text1 = $('text1').innerHTML;
  var text2 = $('text2').innerHTML;

  c3ify($('text1'), text1);
  c3ify($('text2'), text2);
}

function c3ify(element, text) {
  var timeout = 250;
  var count = Math.random() * 30;

  for (var i = 0; i < count; i++) {
    window.setTimeout(function() {
      element.innerHTML = transform(text);
    }, i * timeout + Math.random() * timeout);
  }
  window.setTimeout(function() {
    c3ify(element, text);
  }, i * timeout + Math.random() * 10000);
}

function transform(text) {
  text = text.replace('<br>', '|');
  var tmp = '';
  for (var i = text.length - 1; i > 0; i--) {
    tmp = text[i] + tmp;
    if (Math.floor(Math.random() * 4) == 1) {
      tmp = replacements[Math.floor(Math.random() * replacements.length)] + tmp;
    }
  }
  tmp = text[0] + tmp;
  return tmp.replace('|', '<br>');
}

function $(id) {
  return document.getElementById(id);
}

window.onload = start;