Text Glitch

index.html

<div class="content" id="title">Hello World</div>
<div class="content" id="text">numinous euro-pop hacker plastic geodesic realism sprawl. Tokyo tube assassin fetishism concrete weathered San Francisco. human receding tiger-team disposable gang sunglasses office. receding woman warehouse girl ablative claymore mine singularity. neon urban tanto wonton soup cardboard Chiba courier. face forwards rebar saturation point free-market artisanal camera human. systemic realism engine geodesic warehouse digital sprawl. city post- urban franchise nodality neon dome. 

systema pre- Legba otaku bicycle otaku table. silent neural smart- narrative fluidity into tower. engine drone denim garage chrome pen shanty town. corporation -ware industrial grade uplink shoes drone concrete. math- industrial grade sensory A.I. hotdog neon dead. San Francisco cyber- advert into vinyl Shibuya pistol. towards marketing weathered pre- corrupted tattoo artisanal. drone 3D-printed lights euro-pop sentient tower urban. 
</div>
<div class="content" id="credits">Text generated from loremgibson.org</div>

script.js

const chars = "☺Σ×Π#-_¯—→↓↑←0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";

var Glitch = function(selector, index, numberOfGlitchedLetter, timeGlitch, timePerLetter, timeBetweenGlitch){
	this.selector = selector;
	this.index = index;
	this.numberOfGlitchedLetter = numberOfGlitchedLetter;
	this.innerText;
	this.charArray = [];
	this.charIndex = [];
	this.timeGlitch = timeGlitch;
	this.timeBetweenGlitch = timeBetweenGlitch;
	this.timePerLetter = timePerLetter;
	this.maxCount = Math.floor(this.timeGlitch/this.timePerLetter);
	this.count = 0;
}

Glitch.prototype.init = function(){
	this.innerText = this.selector.innerText;
	this.charArray = this.innerText.split("");
	if(this.numberOfGlitchedLetter == undefined || this.numberOfGlitchedLetter > this.innerText.length){
		this.numberOfGlitchedLetter = this.innerText.length;
	}
	this.defineCharIndexToRandomize();
}

Glitch.prototype.defineCharIndexToRandomize = function(){
	this.charIndex = [];
	for(let i=0; i<this.numberOfGlitchedLetter; i++){
		let randCharIndex = Math.floor(Math.random() * this.charArray.length);
		this.charIndex.push(randCharIndex);
	}
}

Glitch.prototype.randomize = function(){
	//copy the char array
	let randomString = Array.from(this.charArray);
	
	//randomize char
	for(let i=0; i<this.numberOfGlitchedLetter; i++){
		let randIndex = Math.floor(Math.random() * chars.length);
		let randCharIndex = this.charIndex[i];
		if(randomString[randCharIndex] !== ' '){
			randomString[randCharIndex] = chars[randIndex];
		}
	}
	this.selector.innerText = randomString.join("");
}

Glitch.prototype.update = function(interval){
	if(this.count >= this.maxCount - 1){
		this.selector.innerText = this.innerText;
		this.defineCharIndexToRandomize();
		let ctx = this;
		let wait = setTimeout(function(){
			ctx.count = 0;
		}, this.timeBetweenGlitch);
	}else{
		this.randomize();
		this.count ++;
	}
}

Glitch.prototype.glitch = function(){
	let ctx = this;
	let interval= setInterval(function(){
        ctx.update(this);
      },this.timePerLetter);
}

var arrayElements;
var glitchArray = [];

function initAllGlitch(){
	arrayElements = document.querySelectorAll(".content");
	for(let i=0; i<arrayElements.length; i++){
		let selector = arrayElements[i];
		let randLetterNumber = 2 + Math.floor(Math.random() * 8);
		let randGlitchTime = 500 + Math.floor(Math.random() * 2500);
		let randGlitchPauseTime = 500 + Math.floor(Math.random() * 2500);
		let glitch = new Glitch(selector, i, randLetterNumber, 200, 65, randGlitchPauseTime);
		glitch.init();
		glitchArray.push(glitch);
	}
}


function update(){
	for(let i=0; i<glitchArray.length; i++){
		let glitch = glitchArray[i];
		glitch.glitch();
	}
}

initAllGlitch();
update();

style.css

body{
	background: #0a0a0a;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow : hidden;
}

.content{
	font-family: monospace;
  margin: auto;
	color: white;
	padding: 10%;;
}

#title{
	text-align: center;
	text-transform: uppercase;
	font-size : 4em;
	border-bottom : solid 1px white;
}

#text{
	text-align: left;
	font-size : 1.25em;
	text-transform: lowercase;
}

text-glitch.markdown

Text Glitch

A Pen by Alexandre Rivaux on CodePen.

License.