Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Release your testosterone and observe the extreme increase in muscle mass.

Publish perfectly-optimized content in 1-click









 
 
 

How to create GLITCH effect with CSS

 

 
How to create GLITCH effect with CSS
 

With the CSS language it is possible to create personalized effects and animations within Web pages and Internet sites.
In this article we will see how to develop a GLITCH animation and get this result:


 

How to create an animated GLITCH effect on text in CSS

 
As usual, first of all we create a new HTML document and set the structure of the Web page:




<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>How to create GLITCH effect with CSS</title>
</head>
<body>
</body>
</html>

Inside our page we will insert all the HTML and CSS elements necessary for the creation of the animated GLITCH effect. It could appear as a very visually complex effect.
It's actually pretty simple to make and doesn't require applying too much HTML markup. So let's immediately write the code that will make up the body of our document.

<div id="container">
<h1 class="glitch">
DZOSOFT.COM
<span class="first">DZOSOFT.COM</span>
<span class="second" aria-hidden="true">DZOSOFT.COM</span>
</h1>
</div>
Let's analyze what is written, externally we find the <div></div> container element that will have the task of containing all the elements inside.
Internally we find the main element, that is the text "Glitch effect" inserted inside the tags <h1></h1>.

To this element it is necessary to assign a class to make it recognizable and to be able to recall it quickly, so we name it by adding class="glitch"strong>. We continue by noting that there are other elements within the main tag <h1></h1>, in fact the goal we want to achieve includes 3 layers of different colors which, superimposed animated, form the desired effect.

That's why besides the text "Glitch effect" between <h1></h1> we find 2 more elements with the same text. Each of the two elements <span></span> can be recalled thanks to the identifying class.

Let's now define the CSS code thanks to which we will be able to create the desired GLITCH effect.

 

The CSS file

 
Let's create a new CSS file and give it a name, for example style.css, so that it can be easily identified and recalled. After creating the CSS file, we include it in the code of the HTML file so that we can call it. We then insert an external link to the style file into the main document:

<link href="style.css" rel="stylesheet" type="text/css">


We are now ready to write the style rules that will shape the GLITCH effect.

Let's go inside the file style.css and define the formatting of the general container of our document or the body.

body{
width: 100%;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
margin: 0px;
background: #000;
}

Using the rules display: grid; align-items: center;and justify-items: center;all the objects contained within the container <div class=”container”></div> will be positioned exactly in the center of the page. We also set a dark background color to make the GLITCH effect more visible.

 

Let's stylize the text

 
At this point it's time to move on to the subject of our article or the <h1></h1> called glitch

.glitch {
font-size: 150px;
font-weight: 700;
text-transform: uppercase;
position: relative;
text-align: center;
font-family: sans-serif;
color: #fff;
}

We will get 3 "Glitch effect" writings when we have inserted two elements <span></span> in addition to the main subject <h1></h1>. So let's focus on the stylization of these two additional elements. First we indicate position:absolute;for both and immediately after we set the position.

.glitch span {
position: absolute;
top: 0;
left: 0;
}

Once this is done, all that remains is to continue with the definition of the style and the creation of the nuance that we will animate later.
Let's take advantage of the CSS property called text-shadow which allows you to add shadows to the text and form multiple levels of RGB coloring.
Thanks to this property we can in fact insert all 3 RGB colors and start shaping the final effect.
We continue by creating the animation that will be assigned to the two elements <span></span>.

.glitch span.first {
animation: glitch 750ms infinite;
}
.glitch span.second {
animation: glitch 550ms infinite;
}


Analyzing what has been written, we note that the two animations both have an infinite duration but a different speed, 750ms and 550ms, this as we will have a movement discrepancy and therefore a better final result.

 

We shape the animation

 
We continue towards the end of the article and write the rules that will shape the animation, first of all we delete the text-shadow previously written rules within the rules assigned to the element .glitch spanand we define the @keyframesrecalling the name of the animation created just now.




@keyframes glitch {
0% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85),
−0.04em -0.030em 0 rgba(0, 255, 0, 0.85),
−0.030em 0.05em 0 rgba(0, 0, 255, 0.85);
}
20% {
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.85),
−0.04em -0.030em 0 rgba(0, 255, 0, 0.85),
−0.030em 0.05em 0 rgba(0, 0, 255, 0.85);
}
21% {
text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85),
0.025em 0.025em 0 rgba(0, 255, 0, 0.85),
−0.04em -0.04em 0 rgba(0, 0, 255, 0.85);
}
49% {
text-shadow: -0.04em -0.030em 0 rgba(255, 0, 0, 0.85),
0.025em 0.025em 0 rgba(0, 255, 0, 0.85),
−0.04em -0.04em 0 rgba(0, 0, 255, 0.85);
}
50% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85),
0.05em 0 0 rgba(0, 255, 0, 0.85),
0 -0.04em 0 rgba(0, 0, 255, 0.85);
}
99% {
text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.85),
0.05em 0 0 rgba(0, 255, 0, 0.85),
0 -0.04em 0 rgba(0, 0, 255, 0.85);
}
100% {
text-shadow: -0.030em 0 0 rgba(255, 0, 0, 0.85),
−0.030em -0.030em 0 rgba(0, 255, 0, 0.85),
−0.030em -0.04em 0 rgba(0, 0, 255, 0.85);
}
}

What we will have to do is define keyframes that fill the animation from 0% to 100% by alternating the RGB coloring. The latter consists of three numerical values ​​ranging from 0 to 255 and correspond to the colors red, green and blue combined with what is a rapid and misaligned movement generating a GLITCH.
In addition to determining the percentage of animation, it is important to create the "snap" effect possible thanks to small percentage differences. In our example (20% and 21% or 49% and 50% and finally 99% and 100%) it was done so that the animation does not move smoothly and creates the final result.


It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
Publish perfectly-optimized content in 1-click