Learn how to create a dynamic glitch effect on text using HTML, CSS, and JavaScript.
Table of Contents
If you're looking for a way to add distortion or glitch effects to your text, you've come to the right place. Just follow a few steps and you're ready to go with your code
The glitch effect is a popular trend in digital design, known for its unique, distorted appearance. By adding a glitch effect to text, you can create an eye-catching and dynamic effect that is perfect for adding a modern touch to your design. In this tutorial, we will show you how to create a glitch effect on text using HTML, CSS, and JavaScript.
Let's start making an amazing glitch effect using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our glitch effects.
The body of the HTML file includes two div elements, one with a class of "word" displaying the text "Loading..." and another with a class of "overlay". The script tag is used to include three external JavaScript libraries, jQuery, Lettering.js, and script.js, which will be used for implementing the glitch effect.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our glitch effect using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we need to style our text by adding our CSS. This will give our text an upgraded presentation and glitch effect.
The html and body selectors set the height of the page to 100% and apply a radial gradient as the background color for the body. The font-weight property is set to 400 and the overflow property is set to hidden, which hides any content that exceeds the boundaries of the body. The padding property sets the top and left padding of the body to 30px, with the remaining padding set to 0.
The .word selector styles a div element with the class "word". It sets the position of the element to absolute and positions it at the center of the page using left, right, top, and bottom. The text-shadow property applies a shadow effect to the text of the element, and the font-size and line-height properties set the font size and line height of the text.
The .word span selector styles the span element inside the div with the class "word". It sets the display property to inline-block and uses the transform property to translate the element 100% to the right and scale it to 0.9. The transition property sets the transition duration to 500ms.
The .word .done selector styles the span element inside the div with the class "word" when it has a class of "done". It sets the color of the text to green and uses the transform property to move the element back to its original position and scale it to 1.
The .overlay selector styles a div element with the class "overlay". It sets the position of the element to absolute and positions it at the center of the page using left, right, top, and bottom. It sets the background-image property to a linear gradient and uses the background-size property to set the size of the gradient.
Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);
html,
body {
height: 100%;
}
body {
background: radial-gradient(#222922, #000500);
font-family: 'Source Code Pro', monospace;
font-weight: 400;
overflow: hidden;
padding: 30px 0 0 30px;
text-align: center;
}
.word {
bottom: 0;
color: #fff;
font-size: 2.5em;
height: 2.5em;
left: 0;
line-height: 2.5em;
margin: auto;
right: 0;
position: absolute;
text-shadow: 0 0 10px rgba(50, 150, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
top: 0
}
.word span {
display: inline-block;
transform: translateX(100%) scale(0.9);
transition: transform 500ms;
}
.word .done {
color: #6f6;
transform: translateX(0) scale(1);
}
.overlay {
background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
background-size: 1000px 2px;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
} Step 3 (JavaScript Code):
Finally, we are all set now to turn out plain text into glitch effect by using JavaScript.
The below code block defines a JavaScript class Ticker and its methods. The class constructor takes an HTML element as an argument and uses the lettering() method from the lettering.js library to split the text of the element into individual letters wrapped in <span> tags. The class has properties such as done, cycleCount, cycleCurrent, chars, charsCount, letters, letterCount, and letterCurrent, which are used to keep track of the animation state.
The class also has methods like getChar(), which randomly selects a character from the chars array; reset(), which resets the animation state; and loop(), which controls the animation loop. The loop() method uses the requestAnimationFrame() function to update the animation frame and manipulate the opacity of the letters to create the glitch effect.
The code also selects all elements with a class of word and creates a new instance of the Ticker class for each element. The created Ticker objects are stored as a data attribute on the corresponding HTML element. The reset() method is then called on each Ticker object to start the animation.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
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 );
});Final Output:
Conclusion:
In this tutorial, we have shown you how to create a glitch effect on text using HTML, CSS, and JavaScript. By following these steps, you can add a modern and dynamic touch to your designs that will capture the attention of your audience.
It's important to note that while the glitch effect can be a fun and eye-catching addition to your designs, it's not appropriate for all situations. It's important to use it in a way that complements your overall design and message.
We hope you found this tutorial helpful and that you can use these techniques to create your own glitch text effects. Experiment with different colors, fonts, and animation patterns to create a unique and personalized design that stands out. Thank you for reading!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
