Create Glitchy, Blinking Text Effects

Create Glitchy, Blinking Text Effects

Download Code

STEP 1: Blinking Letters

To make the blinking letter effect found on betamatters, add some images to the page that will act as the text to make blink on and off. The structure shown below is a minimal way to achieve this effect:

CODE:

</div>

STEP 2: Style The Content

Now the content of the page will be styled with the background getting the right colour and the letter being given the right size. The opacity is turned off so that with JavaScript the ‘anim’ class can be added.

CODE:

body{

background: #5700c8;

}

.letter{

width: 150px;

opacity: 0;

}

.anim{

animation: glitch 1s forwards;

}

STEP 3: Blinking With Keyframes

Using keyframes, the 'anim' class in the previous step uses these to change the opacity and make the letters blink on and off as they appear onscreen.

CODE:

@keyframes glitch {

0% {opacity: 0;}

40% {opacity: 1;}

45% {opacity: 0;}

50% {opacity: 1;}

55% {opacity: 0;}

85% {opacity: 1;}

90% {opacity: 0;}

100% {opacity: 1;}

}

STEP 4: Making It Work

To make this effect work, first of all, the letters — which are child elements of the 'wrap' div — are placed into an array called 'letters'. The selected letter will be stored in the 'sel' variable.

CODE:

var elem = document.getElementById('wrap');

var letters = [];

var sel;

for(i=0; i<elem.children.length; i++){

letters.push(elem.children[i]);

}

STEP 5: Generate A Letter

The 'generate' function will randomly select one of the letters in the array and run a 'setTimout' to call the 'animate' function at a random time so that the letters appear more glitchy.

CODE:

function generate(){

sel = Math.floor(Math.random()*letters.

length);

setTimeout(animate, (Math.

random()*500)+100);

}

STEP 6: Animating The Letter

The 'animate' function adds the 'anim' class to the letter and then removes this letter from the array so that it can't be called again. The 'generate' function is called to run which starts the whole process working.

CODE:

function animate(){

letters[sel].classList.add("anim");

letters.splice(sel, 1);

if( letters.length > 0 ){

generate();

}

generate();