Skip to main content

Glitch Effect On Text | Rustcode

by Rustcode
Glitch-Effect-On-Text-HTML-And-CSS-Rustcode

"glitch effect on text" is an effect on text, which you can use in website landing page headings. We have already created "Glitch Effect On Image", you can see it. So the best part of the "glitch effect on text" is, this effect is created using only CSS animation properties because there are a lot of script plugins available in the market that will help to create this effect eg "Glitch effect on image" uses MgGlitchJs Plugin.

You can read other articles which is related to web development.

READ ALSO:

01. Web Development Tutorials


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Glitch Effect On Text | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<body>

 <div class="container">
  <h1 class="effect">EFFECT</h1>
 </div>

</body>



03.Normal CSS

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: grid;
  margin-top: 14%;
  justify-content: center;
}

.container .effect {
  color: #333;
  font-size: 96px;
  position: relative;
  font-family: arial;
}

.container .effect::before,
.container .effect::after {
  content: 'EFFECT';
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
  background-color: rgba(80, 80, 80, 0.9);
  color: white;
}

.container .effect::before {
  left: 8px;
  text-shadow: 2px 0px #FF3377;
  animation: effect 1.5s infinite linear;
}

.container .effect::after {
  left: 8px;
  text-shadow: -2px 0px #00FFEE;
  animation: effect 1.5s infinite linear;
}


04. Animation CSS

@keyframes effect {
  0% {
    clip: rect(20px, auto, 18px, 0px);
  }
  10% {
    clip: rect(10px, auto, 30px, 0px);
  }
  20% {
    clip: rect(90px, auto, 65px, 0px);
  }
  30% {
    clip: rect(30px, auto, 100px, 0px);
  }
  40% {
    clip: rect(72px, auto, 80px, 0px);
  }
  50% {
    clip: rect(70px, auto, 94px, 0px);
  }
  60% {
    clip: rect(68px, auto, 64px, 0px);
  }
  70% {
    clip: rect(40px, auto, 88px, 0px);
  }
  80% {
    clip: rect(84px, auto, 60px, 0px);
  }
  90% {
    clip: rect(16px, auto, 34px, 0px);
  }
  100% {
    clip: rect(30px, auto, 60px, 0px);
  }
}



05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.



RELATED POST:

Comments

Post a Comment