Live Code Editor

Try it yourself..

Glitch Effect Loader

This code creates a glitchy text animation effect for the word "Loading..." on a dark radial gradient background. Here's a summary:

HTML Structure:

Basic HTML5 document with a <div> displaying "Loading..." text
Includes jQuery and Lettering.js libraries from CDN
Links to external CSS (glitch.css) and JS (glitch.js) files
Has an overlay <div> for visual effects

CSS Styling:

Uses a monospace font (Source Code Pro)
Creates a dark radial gradient background
Positions the text absolutely centered on screen
Adds greenish text shadow for a "digital" look
Defines animation states for letters (transform and color changes)
Includes a semi-transparent overlay gradient

JavaScript Animation:

The Ticker class handles the glitch animation:
- Splits text into individual letters using Lettering.js
- Replaces each letter with random characters from a predefined set
- Cycles through 5 random characters before revealing the original letter
- Progresses through each letter sequentiallyWhen complete, resets and repeats the animation
Uses requestAnimationFrame for smooth animation
Each letter gets a random opacity during the glitch phase
Original letters are revealed in green color

Overall Effect:

Creates a loading screen with the word "Loading..." that appears to glitch (rapidly display random characters) before settling into its correct form, then repeats this effect continuously. The design has a retro-computer/cyberpunk aesthetic with the dark background and green text effects.

HTML

CSS

JavaScript

function Ticker( elem ) {
	elem.lettering();
	this.done = false;
	this.cycleCount = 5;
	this.cycleCurrent = 0;
	this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
	this.charsCount = this.chars.length;
	this.letters = elem.find( 'span' );
	this.letterCount = this.letters.length;
	this.letterCurrent = 0;

this.letters.each( function() {
		var $this = $( this );
		$this.attr( 'data-orig', $this.text() );
		$this.text( '-' );
	});
}

Ticker.prototype.getChar = function() {
	return this.chars[ Math.floor( Math.random() * this.charsCount ) ];
};

Ticker.prototype.reset = function() {
	this.done = false;
	this.cycleCurrent = 0;
	this.letterCurrent = 0;
	this.letters.each( function() {
		var $this = $( this );
		$this.text( $this.attr( 'data-orig' ) );
		$this.removeClass( 'done' );
	});
	this.loop();
};

Ticker.prototype.loop = function() {
	var self = this;

this.letters.each( function( index, elem ) {
		var $elem = $( elem );
		if( index >= self.letterCurrent ) {
			if( $elem.text() !== ' ' ) {
				$elem.text( self.getChar() );
				$elem.css( 'opacity', Math.random() );
			}
		}
	});

if( this.cycleCurrent < this.cycleCount ) {
		this.cycleCurrent++;
	} else if( this.letterCurrent < this.letterCount ) {
		var currLetter = this.letters.eq( this.letterCurrent );
		this.cycleCurrent = 0;
		currLetter.text( currLetter.attr( 'data-orig' ) ).css( 'opacity', 1 ).addClass( 'done' );
		this.letterCurrent++;
	} else {
		this.done = true;
	}

if( !this.done ) {
		requestAnimationFrame( function() {
			self.loop();
		});
	} else {
		setTimeout( function() {
			self.reset();
		}, 750 );
	}
};

$words = $( '.word' );

$words.each( function() {
	var $this = $( this ),
		ticker = new Ticker( $this ).reset();
	$this.data( 'ticker', ticker  );
});