How To Make Your Text Glitchy Using HTML And CSS ( Source Code)

Hey guys, welcome to our blog, in today’s blog we are going to see how to create a glitchy text using html and css. Before that, we could see what this project is about.

The glitchy text project is used to make the normal text into a glitchy text effect which means some random animations were used in order to make the text appear in a different way. It is used in advertisements, shopping websites, graphic designing, and a lot more to highlight the value you serve from the text, for example in shopping websites the discount may be used as glitch effect. This is one of the good effects among others that may be used in website titles and banners.

So let us begin our project journey by adding the requisite source codes. The first part we are adding here is html.

Html Code Glitchy Text

<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>

<div class="glitch" data-text="GLITCH">GLITCH</div>

Here we have used the simple html code because we just making our text glitch so there is no need for many lines.

Now we simply add the link from another source for importing the font family and next we are adding the div tag with a class name glitch to make effects on it using css by calling the class name. Then add the contents that need to be glitched and close the div tag.

So that’s for html, now we start making our glitch effect using the css code given below.

Css Code Glitchy Text

@import "compass/css3";

body{
  background:black;
  font-family: 'Varela', sans-serif;
}

.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}

Now the css code for the glitch effect is added successfully. In this code, first, we add the background color and font family in the body section.

Ecommerce Website Using Html Css And Javascript | E-commerce Website ( Source Code)

Then after that, we are calling the class name glitch to make the text changes in size, color, weight, etc. The respective line of code for the explanation is down below.

.glitch{
  color:white;
  font-size:100px;
  position:relative;
  width:400px;
  margin:0 auto;
}

Second, we started adding the CSS animation properties for the Glitch effect that needs to be done on the text. For that, we first called the animation with keyframes and the name for the animation, Then We declare the text to be done in the required format given inside the class name and it should be held before the animation of glitch. For this specific explanation, the lines of code for this purpose are given down.

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
}

Third, we are adding the glitch effect to be done after the effects which are given in (before::). Now the lines of code which are mentioned below would react after the glitch effect properties that are done before class.

@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}
.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:2px;
  text-shadow:-1px 0 red;
  top:0;
  color:white;
  background:black;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
}

Now we have successfully added the css code. We now came to an end of this project and before that, we would see how our project will be after completing these lines of code.

We can view our project in the output section mentioned below.

Final Output Glitchy Text

Now we have successfully completed our text glitchy project with html and css. If you want to use this project for personnel then make sure to use the above code mentioned and the code pen link for the project is also given below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this blog useful, then make sure to search code with random on google for 100+ front-end-end projects with source codes. Also, make sure to follow codewithrandom on Instagram.

Refer Code: Lucas Bebber

Written By: Ragunathan S