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.
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.
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>
HTML Output:
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);
}
}
$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:
ADVERTISEMENT
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.
ADVERTISEMENT
Written by @Harsh_9 & Himanshu Singh
ADVERTISEMENT
