You are currently viewing Create Glitch Text Effect With The Help Of Html & Css

Create Glitch Text Effect With The Help Of Html & Css

Hello coders, A very warm welcome to Code With Random. Today we’ll create a glitch text effect with the help of HTML & CSS. We have come through many effects while using PowerPoint presentation in text. Now as a developer we should code this and boost our Front-End Development knowledge. Before going to code part let us understand what does this effect actually means.

Create Glitch Text Effect With The Help Of Html & Css

So this How a glitch effect looks like.

Glitch Text Effect
Glitch Text Effect

What is Text Glitches Effects?

We as a developer are very familiar with the word glitch in terms of code and software. But here we’ll use this as an effect in your text. This basically an effect use to show the text attractive and grab the attention of the user interface.

What is a Glitch effect? Also known as Chromatic Aberration, a Glitch effect is a popular video effect that distorts the image and colors for a few seconds to imitate a problem with the video signal.

 Let us see the code part of the Glitch Effect.

 

Live Server Of Glitch Text Effect:-


This is the Live Server of the The Glitch Effect.

HTML Code For Glitch Text Effect:-

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.Inside the body tag the main content of the website lies.So Here Our HTML part is very less and easy inside the body tag we insert the heading tag and set the class as glitch so that later-on we can apply the CSS on that.

<h1 class="glitch" data-text="Welcome to Mumbai">Codewithrandom</h1>
This is a very small HTML code we have just use <h1> tag and giving a heading in it. Because here CSS plays a major role in adding the text glitch. Let us see the HTML Output, Before writing the CSS for Glitch effect.

HTML Output:

Glitch Text Effect
Glitch Text Effect Html

 

CSS Code For Glitch Text Effect:-

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.But Here we are not using only pure css besides of it we are using the CSS preprocess SCSS.

Now You may be thinking what is SCSS. So Let’s discuss about it.

SCSS : Syntactically Awesome Style Sheet is the superset of CSS. SCSS is the more advanced version of CSS. SCSS was designed by Hampton Catlin and was developed by Chris Eppstein and Natalie Weizenbaum. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss.

  • SCSS contains all the features of CSS and contains more features that are not present in CSS which makes it a good choice for developers to use it.
  • SCSS is full of advanced features.
  • SCSS offers variables, you can shorten your code by using variables. It is a great advantage over conventional CSS.

 

So need to name your styling file as File_name.scss .

@for loop

This is basically a simple iterator loop for SCSS.

When I was stupid enough to write my own grid framework I used an @for loop to generate code for columns.

$columns: 5;
@for $i from 1 through $columns {
    .columns-#{$i} {
        width: (100% / $i);
    }
}
Similarily we have decided steps =20 and then and run it loop for 20 iterations.
$primaryColor: #fff;
$secondaryColor: #333;
$steps: 20;
body {
    background-color: $secondaryColor;
    padding: 100px;
}
.glitch {
    position: relative;
    margin: 0 auto;
    color: $primaryColor;
    font-size: 80px;
    font-family: "Exo", sans-serif;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    transform: scale3d(1, 1, 1);
    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        background: $secondaryColor;
        color: $primaryColor;
        clip: rect(0, 900px, 0, 0);
    }
    &::before {
        left: 7px;
        text-shadow: 1px 0 green;
        animation: glitch-effect 3s infinite linear alternate-reverse;
    }
    &::after {
        left: 3px;
        text-shadow: -1px 0 red;
        animation: glitch-effect 2s infinite linear alternate-reverse;
    }
}
@keyframes glitch-effect {
    @for $i from 0 through $steps {
        #{percentage($i*(1/$steps))} {
            clip: rect(random(100) + px, 9999px, random(100) + px, 0);
        }
    }
}

In this External CSS Code we have styled the tags defined in HTML tags and defined the effects of glitch in two parts before and after. Let us look at the Output of this project.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Final Output:

Summary:

We have created the text glitch project. We defined one tag named as h1 in HTML File. And in CSS we have styled the defined tags in HTML code and set the activation of the glitch effect. If you loved it do comment as it boost our motivation to bring new projects for you guys. If you feel any difficulty while performing you are feel free to reach out us with the help of comment section.

 
Happy Coding
 

Written by @Harsh_9 & Himanshu Singh

Leave a Reply