7+ JavaScript Text Glitch Effect Examples

This post contains a total of 7+ JavaScript Text Glitch Effect Examples with Source Code. All these Text Glitch Effects are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Text Glitch Effect Examples

1. Multiple Glitch Effect

Made by Rasmus Bihl Andersson. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:400,900'>
<style>
.glitch--style-1 {
  --gap-horizontal: 20px;
  --gap-vertical: 2px;
  --time-anim: 2.25s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: none;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: transparent;
}

.glitch--style-2 {
  --gap-horizontal: 5px;
  --gap-vertical: 10px;
  --time-anim: 2s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: luminosity;
  --blend-mode-4: none;
  --blend-mode-5: none;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: #4d8c60;
  --blend-color-4: transparent;
  --blend-color-5: #c9b09a;
}

.glitch--style-3 {
  --gap-horizontal: 20px;
  --gap-vertical: 2px;
  --time-anim: 2.25s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: multiply;
  --blend-mode-4: none;
  --blend-mode-5: none;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: #af4563;
  --blend-color-4: transparent;
  --blend-color-5: transparent;
}

.glitch--style-4 {
  --gap-horizontal: 5px;
  --gap-vertical: 20px;
  --time-anim: 5s;
  --blend-mode-1: none;
  --blend-mode-2: exclusion;
  --blend-mode-3: hard-light;
  --blend-mode-4: overlay;
  --blend-mode-5: none;
  --blend-color-1: transparent;
  --blend-color-2: #52f1cd;
  --blend-color-3: #525df1;
  --blend-color-4: #f19b52;
  --blend-color-5: transparent;
}

.glitch--style-5 {
  --gap-horizontal: 50px;
  --gap-vertical: 100px;
  --time-anim: 2.25s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: overlay;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: #000;
  --blend-color-5: #8d16f2;
}

.glitch--style-6 {
  --gap-horizontal: 3px;
  --gap-vertical: 70px;
  --time-anim: 2.25s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: overlay;
  --blend-mode-4: none;
  --blend-mode-5: none;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: rgba(255,255,255,0.2);
  --blend-color-4: transparent;
  --blend-color-5: transparent;
}

.glitch {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
  overflow: hidden;
  width: 95%;
}
.glitch:before, .glitch:after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000000;
  font: inherit;
  visibility: hidden;
}
.glitch:before {
  left: 2px;
  text-shadow: -2px 0 #FF00F8;
  clip: auto;
}
.glitch:after {
  left: -2px;
  text-shadow: -2px 0 #00D5FF;
  clip: auto;
}
.glitch:before {
  visibility: visible;
  animation: glitch-anim-2 4s infinite linear alternate-reverse;
}
.glitch:after {
  visibility: visible;
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
.glitch.style-2:before, .glitch.style-2:after {
  animation-name: glitch-anim-2;
}
.glitch.style-1-hor:before, .glitch.style-1-hor:after {
  animation-name: glitch-anim-1-horizontal;
}
.glitch.style-2-hor:before, .glitch.style-2-hor:after {
  animation-name: glitch-anim-2-horizontal;
}
.glitch.style-3-hor:before, .glitch.style-3-hor:after {
  animation-name: glitch-anim-3-horizontal;
}
.glitch.style-1-ver:before, .glitch.style-1-ver:after {
  animation-name: glitch-anim-1-vertical;
}
.glitch.style-2-ver:before, .glitch.style-2-ver:after {
  animation-name: glitch-anim-2-vertical;
}
.glitch.style-3-ver:before, .glitch.style-3-ver:after {
  animation-name: glitch-anim-3-vertical;
}
.glitch.style-text:before, .glitch.style-text:after {
  animation-name: glitch-anim-text;
}
.glitch.style-flash:before, .glitch.style-flash:after {
  animation-name: glitch-anim-flash;
}

@keyframes glitch-anim {
  0% {
    clip: rect(29px, 9999px, 11px, 0);
  }
  4.16666667% {
    clip: rect(11px, 9999px, 21px, 0);
  }
  8.33333333% {
    clip: rect(18px, 9999px, 1px, 0);
  }
  12.5% {
    clip: rect(17px, 9999px, 5px, 0);
  }
  16.66666667% {
    clip: rect(3px, 9999px, 27px, 0);
  }
  20.83333333% {
    clip: rect(20px, 9999px, 25px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 19px, 0);
  }
  29.16666667% {
    clip: rect(12px, 9999px, 151px, 0);
  }
  33.33333333% {
    clip: rect(29px, 9999px, 1px, 0);
  }
  37.5% {
    clip: rect(24px, 9999px, 31px, 0);
  }
  41.66666667% {
    clip: rect(9px, 9999px, 1px, 0);
  }
  45.83333333% {
    clip: rect(1px, 9999px, 17px, 0);
  }
  50% {
    clip: rect(3px, 9999px, 27px, 0);
  }
  54.16666667% {
    clip: rect(17px, 9999px, 151px, 0);
  }
  58.33333333% {
    clip: rect(15px, 9999px, 10px, 0);
  }
  62.5% {
    clip: rect(1px, 9999px, 15px, 0);
  }
  66.66666667% {
    clip: rect(10px, 9999px, 3px, 0);
  }
  70.83333333% {
    clip: rect(27px, 9999px, 117px, 0);
  }
  75% {
    clip: rect(2px, 9999px, 5px, 0);
  }
  79.16666667% {
    clip: rect(4px, 9999px, 13px, 0);
  }
  83.33333333% {
    clip: rect(8px, 9999px, 44px, 0);
  }
  87.5% {
    clip: rect(13px, 9999px, 14px, 0);
  }
  91.66666667% {
    clip: rect(21px, 9999px, 31px, 0);
  }
  95.83333333% {
    clip: rect(0px, 9999px, 33px, 0);
  }
  100% {
    clip: rect(9px, 9999px, 148px, 0);
  }
}
@keyframes glitch-anim-2 {
  6.66666667% {
    clip: rect(43px, 9999px, 105px, 0);
  }
  10% {
    clip: rect(5px, 9999px, 0px, 0);
  }
  13.33333333% {
    clip: rect(16px, 9999px, 14px, 0);
  }
  16.66666667% {
    clip: rect(12px, 9999px, 106px, 0);
  }
  20% {
    clip: rect(1px, 9999px, 189px, 0);
  }
  23.33333333% {
    clip: rect(20px, 9999px, 41px, 0);
  }
  26.66666667% {
    clip: rect(30px, 9999px, 176px, 0);
  }
  30% {
    clip: rect(12px, 9999px, 32px, 0);
  }
  33.33333333% {
    clip: rect(22px, 9999px, 155px, 0);
  }
  36.66666667% {
    clip: rect(14px, 9999px, 40px, 0);
  }
  40% {
    clip: rect(25px, 9999px, 86px, 0);
  }
  43.33333333% {
    clip: rect(13px, 9999px, 94px, 0);
  }
  46.66666667% {
    clip: rect(1px, 9999px, 139px, 0);
  }
  50% {
    clip: rect(14px, 9999px, 76px, 0);
  }
  53.33333333% {
    clip: rect(2px, 9999px, 124px, 0);
  }
  56.66666667% {
    clip: rect(6px, 9999px, 70px, 0);
  }
  60% {
    clip: rect(9px, 9999px, 140px, 0);
  }
  63.33333333% {
    clip: rect(7px, 9999px, 151px, 0);
  }
  66.66666667% {
    clip: rect(1px, 9999px, 131px, 0);
  }
  70% {
    clip: rect(21px, 9999px, 183px, 0);
  }
  73.33333333% {
    clip: rect(11px, 9999px, 60px, 0);
  }
  76.66666667% {
    clip: rect(91px, 9999px, 28px, 0);
  }
  80% {
    clip: rect(14px, 9999px, 193px, 0);
  }
  83.33333333% {
    clip: rect(2px, 9999px, 150px, 0);
  }
  86.66666667% {
    clip: rect(3px, 9999px, 131px, 0);
  }
  90% {
    clip: rect(17px, 9999px, 45px, 0);
  }
  93.33333333% {
    clip: rect(18px, 9999px, 37px, 0);
  }
  96.66666667% {
    clip: rect(9px, 9999px, 46px, 0);
  }
  100% {
    clip: rect(38px, 9999px, 15px, 0);
  }
}
/* Animations */
/* Horizontal */
@keyframes glitch-anim-1-horizontal {
  0% {
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  10% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  20% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  30% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  40% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  50% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  70% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  80% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  90% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
}
@keyframes glitch-anim-2-horizontal {
  0% {
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  15% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  22% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  31% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  45% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  51% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  63% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  76% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  81% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  94% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  100% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
}
@keyframes glitch-anim-3-horizontal {
  0% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  10% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  25% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  27% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  30% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  33% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  37% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  40% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  45% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  50% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  53% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  57% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  60% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  65% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  70% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  73% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  80% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  100% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
}
/* Vertical */
@keyframes glitch-anim-1-vertical {
  0% {
    -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
    clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
  }
  10% {
    -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
    clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
  }
  20% {
    -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
    clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
  }
  30% {
    -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
    clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
  }
  40% {
    -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
    clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
  }
  50% {
    -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
    clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
    clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
  }
  70% {
    -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
    clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
  }
  80% {
    -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
    clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
  }
  90% {
    -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
    clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
  }
  100% {
    -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
    clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
  }
}
@keyframes glitch-anim-2-vertical {
  0% {
    -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
    clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
  }
  15% {
    -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
    clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
  }
  22% {
    -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
    clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
  }
  31% {
    -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  45% {
    -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
    clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
  }
  51% {
    -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
    clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
  }
  63% {
    -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  76% {
    -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
    clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
  }
  81% {
    -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
    clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
  }
  94% {
    -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
    clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
  }
  100% {
    -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
    clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
  }
}
@keyframes glitch-anim-3-vertical {
  0% {
    -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
    clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
  }
  5% {
    -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
    clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
  }
  10% {
    -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
    clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
  }
  25% {
    -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  27% {
    -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
    clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
  }
  30% {
    -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
    clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
  }
  33% {
    -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
    clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
  }
  37% {
    -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
    clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
  }
  40% {
    -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
    clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
  }
  45% {
    -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
    clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
  }
  50% {
    -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
    clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
  }
  53% {
    -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
    clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
  }
  57% {
    -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
    clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
  }
  60% {
    -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
    clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
  }
  65% {
    -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
    clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
  }
  70% {
    -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
    clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
  }
  73% {
    -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  80% {
    -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
    clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
    clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
  }
}
@keyframes glitch-anim-text {
  0% {
    opacity: 1;
    transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  10% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  20% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  35% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  50% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  60% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  70% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  90% {
    transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
/* Flash */
@keyframes glitch-anim-flash {
  0% {
    opacity: 0.2;
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  33%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
body {
  padding: 0;
  margin: 0;
  border: 0;
  font-family: "Titillium Web", "Helvetica", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  background-color: #000000;
  display: flex;
  color: #ffffff;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  font-size: 10vw;
}

select {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.2;
  transition: 0.3s ease;
}
select:hover {
  opacity: 1;
}
</style>
</head>
<body>
  <span data-text="Glitch this!" class="glitch">
  Glitch this!
</span>

<select id="styleswitch">
  <option value="style-1">Style #1</option>
  <option value="style-2">Style #2</option>
  <option value="style-1-hor">Style Horizontal #1</option>
  <option value="style-2-hor">Style Horizontal #2</option>
  <option value="style-3-hor">Style Horizontal #3</option>
  <option value="style-1-ver">Style Vertical #1</option>
  <option value="style-2-ver">Style Vertical #2</option>
  <option value="style-3-ver">Style Vertical #3</option>
  <option value="style-text">Style Text</option>
  <option value="style-flash">Style Flash</option>
</select>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
//This just changes the style of the glitch
jQuery('#styleswitch').on('change', function () {
  var gstyle = Math.floor(Math.random() * 5) + 1;
  jQuery('.glitch').attr('class', 'glitch glitch--style-' + gstyle + ' ' + jQuery(this).val());
});

jQuery('#styleswitch').trigger('change');
//# sourceURL=pen.js
    </script>
</body>
</html>

2. Word glitch

Made by Quentin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>h</title>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
body {
  background: black;
}

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

@-webkit-keyframes noise-anim {
  0% {
    clip: rect(43px, 9999px, 61px, 0);
  }
  5% {
    clip: rect(95px, 9999px, 78px, 0);
  }
  10% {
    clip: rect(64px, 9999px, 43px, 0);
  }
  15% {
    clip: rect(18px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(53px, 9999px, 45px, 0);
  }
  25% {
    clip: rect(28px, 9999px, 88px, 0);
  }
  30% {
    clip: rect(38px, 9999px, 6px, 0);
  }
  35% {
    clip: rect(68px, 9999px, 68px, 0);
  }
  40% {
    clip: rect(60px, 9999px, 30px, 0);
  }
  45% {
    clip: rect(41px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(29px, 9999px, 24px, 0);
  }
  55% {
    clip: rect(13px, 9999px, 19px, 0);
  }
  60% {
    clip: rect(86px, 9999px, 50px, 0);
  }
  65% {
    clip: rect(16px, 9999px, 94px, 0);
  }
  70% {
    clip: rect(2px, 9999px, 38px, 0);
  }
  75% {
    clip: rect(67px, 9999px, 63px, 0);
  }
  80% {
    clip: rect(21px, 9999px, 83px, 0);
  }
  85% {
    clip: rect(85px, 9999px, 83px, 0);
  }
  90% {
    clip: rect(81px, 9999px, 35px, 0);
  }
  95% {
    clip: rect(94px, 9999px, 23px, 0);
  }
  100% {
    clip: rect(81px, 9999px, 97px, 0);
  }
}

@keyframes noise-anim {
  0% {
    clip: rect(43px, 9999px, 61px, 0);
  }
  5% {
    clip: rect(95px, 9999px, 78px, 0);
  }
  10% {
    clip: rect(64px, 9999px, 43px, 0);
  }
  15% {
    clip: rect(18px, 9999px, 13px, 0);
  }
  20% {
    clip: rect(53px, 9999px, 45px, 0);
  }
  25% {
    clip: rect(28px, 9999px, 88px, 0);
  }
  30% {
    clip: rect(38px, 9999px, 6px, 0);
  }
  35% {
    clip: rect(68px, 9999px, 68px, 0);
  }
  40% {
    clip: rect(60px, 9999px, 30px, 0);
  }
  45% {
    clip: rect(41px, 9999px, 9px, 0);
  }
  50% {
    clip: rect(29px, 9999px, 24px, 0);
  }
  55% {
    clip: rect(13px, 9999px, 19px, 0);
  }
  60% {
    clip: rect(86px, 9999px, 50px, 0);
  }
  65% {
    clip: rect(16px, 9999px, 94px, 0);
  }
  70% {
    clip: rect(2px, 9999px, 38px, 0);
  }
  75% {
    clip: rect(67px, 9999px, 63px, 0);
  }
  80% {
    clip: rect(21px, 9999px, 83px, 0);
  }
  85% {
    clip: rect(85px, 9999px, 83px, 0);
  }
  90% {
    clip: rect(81px, 9999px, 35px, 0);
  }
  95% {
    clip: rect(94px, 9999px, 23px, 0);
  }
  100% {
    clip: rect(81px, 9999px, 97px, 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;
}

@-webkit-keyframes noise-anim-2 {
  0% {
    clip: rect(24px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(42px, 9999px, 23px, 0);
  }
  10% {
    clip: rect(10px, 9999px, 15px, 0);
  }
  15% {
    clip: rect(5px, 9999px, 61px, 0);
  }
  20% {
    clip: rect(40px, 9999px, 56px, 0);
  }
  25% {
    clip: rect(74px, 9999px, 19px, 0);
  }
  30% {
    clip: rect(32px, 9999px, 23px, 0);
  }
  35% {
    clip: rect(12px, 9999px, 71px, 0);
  }
  40% {
    clip: rect(38px, 9999px, 64px, 0);
  }
  45% {
    clip: rect(87px, 9999px, 85px, 0);
  }
  50% {
    clip: rect(33px, 9999px, 73px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 41px, 0);
  }
  60% {
    clip: rect(57px, 9999px, 33px, 0);
  }
  65% {
    clip: rect(46px, 9999px, 91px, 0);
  }
  70% {
    clip: rect(78px, 9999px, 66px, 0);
  }
  75% {
    clip: rect(19px, 9999px, 29px, 0);
  }
  80% {
    clip: rect(55px, 9999px, 44px, 0);
  }
  85% {
    clip: rect(96px, 9999px, 94px, 0);
  }
  90% {
    clip: rect(5px, 9999px, 88px, 0);
  }
  95% {
    clip: rect(14px, 9999px, 60px, 0);
  }
  100% {
    clip: rect(88px, 9999px, 91px, 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(24px, 9999px, 62px, 0);
  }
  5% {
    clip: rect(42px, 9999px, 23px, 0);
  }
  10% {
    clip: rect(10px, 9999px, 15px, 0);
  }
  15% {
    clip: rect(5px, 9999px, 61px, 0);
  }
  20% {
    clip: rect(40px, 9999px, 56px, 0);
  }
  25% {
    clip: rect(74px, 9999px, 19px, 0);
  }
  30% {
    clip: rect(32px, 9999px, 23px, 0);
  }
  35% {
    clip: rect(12px, 9999px, 71px, 0);
  }
  40% {
    clip: rect(38px, 9999px, 64px, 0);
  }
  45% {
    clip: rect(87px, 9999px, 85px, 0);
  }
  50% {
    clip: rect(33px, 9999px, 73px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 41px, 0);
  }
  60% {
    clip: rect(57px, 9999px, 33px, 0);
  }
  65% {
    clip: rect(46px, 9999px, 91px, 0);
  }
  70% {
    clip: rect(78px, 9999px, 66px, 0);
  }
  75% {
    clip: rect(19px, 9999px, 29px, 0);
  }
  80% {
    clip: rect(55px, 9999px, 44px, 0);
  }
  85% {
    clip: rect(96px, 9999px, 94px, 0);
  }
  90% {
    clip: rect(5px, 9999px, 88px, 0);
  }
  95% {
    clip: rect(14px, 9999px, 60px, 0);
  }
  100% {
    clip: rect(88px, 9999px, 91px, 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;
}

.varela {
  font-family: 'Varela', sans-serif;
}

.open {
  font-family: 'Open Sans', sans-serif;
}

.oswald {
  font-family: 'Oswald', sans-serif;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<div class="glitch" data-text="GLITCH">GLITCH</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
      <script>
class App {
  constructor() {
    this.$els = {
      glitch: $('.glitch') };

    this.fontFamily = ['varela', 'open', 'oswald'];
    this.words = ['test', 'glitch', 'Quentin'];
  }

  glitch(delay) {
    setInterval(() => {
      this.removeFontFamily();
      this.$els.glitch.addClass(this.getRandomFontFamily());
      let text = this.getRandomWord();
      this.$els.glitch.attr('data-text', text);
      this.$els.glitch.text(text);
    }, delay);
  }

  getRandomWord() {
    return this.words[Math.floor(Math.random() * this.words.length)];
  }

  getRandomFontFamily() {
    return this.fontFamily[Math.floor(Math.random() * this.fontFamily.length)];
  }

  removeFontFamily() {
    for (let family of this.fontFamily) {
      this.$els.glitch.removeClass(family);
    }
  }}


let app = new App();
app.glitch(1500);
    </script>
</body>
</html>

3. Text glitch transition effect

Made by Alessandro Valeri. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  font-family: 'Roboto', sans-serif;
}
#list {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.item {
  font-size: 50px;
  padding: 15px;
  display: inline-block;
  margin: 20px;
  display: none;
}
.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
</style>
</head>
<body>
  <div id="list">
    <div class="item red">Lorem ipsum dolor sit ametz</div>
    <div class="item red"> ea impetus similique neglegentur</div>
    <div class="item red"> Et harum quidem rerum facilis est et expedita distinctio</div>
    <div class="item red"> officiis debitis aut rerum necessitatibus saepe</div>
    <div class="item"><img width="210" height="213" title="" alt="" src="data:image/png;base64,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" />
</div>
    <div class="item blue">contentiones. Nam</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js'></script>
      <script>
(function () {
  var nodes, current;

  function Animation(element) {
    this.element = element;
    this.stepMul = 10;
    this.stepTo = 4;
    this.element.style.visibility = "visible";
    this.canvas = document.createElement("canvas");
    this.canvas.style.visibility = "hidden";
    this.canvas.style.position = "absolute";
    this.canvas.style.width = this.element.offsetWidth + "px";
    this.canvas.style.height = this.element.offsetHeight + "px";
    this.canvas.style.top = this.element.offsetTop + "px";
    this.canvas.style.left = this.element.offsetLeft + "px";
    this.canvas.style.zIndex = "auto";

    this.context = this.canvas.getContext('2d');

    this.element.parentElement.appendChild(this.canvas);
  };
  Animation.prototype.loadCanvas = function (callback) {
    var self = this;
    html2canvas(this.element, {
      onrendered: function (canvas) {
        self.image = new Image();
        self.image.src = canvas.toDataURL();

        self.canvas.style.visibility = "visible";
        self.element.style.visibility = "hidden";
        callback && callback();
      } });

  };
  Animation.prototype.hide = function () {
    this.step = 0;
    this.showing = false;
    this.loadCanvas(this.render.bind(this));
  };
  Animation.prototype.show = function () {
    this.step = 0;
    this.showing = true;
    this.loadCanvas(this.render.bind(this));
  };
  Animation.prototype.destroy = function () {
    this.canvas && this.canvas.parentElement && this.canvas.parentElement.removeChild(this.canvas);
  };
  Animation.prototype.render = function () {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
    var inc = this.step / this.stepTo;
    this.showing && (inc = 1 - inc);
    for (var i = Math.floor(inc * this.stepMul) + 1, j = 0; j < i; j++) {if (window.CP.shouldStopExecution(0)) break;
      var x = Math.random() * (this.canvas.width / 2),
      y = Math.random() * this.canvas.height,
      w = this.canvas.width - x,
      h = 30 * Math.random() + 2;
      this.context.clearRect(x, y, w, h);
      this.context.clearRect(w, y, x, h);
      this.context.drawImage(this.image, 0, y, w, h, x, y, w, h);
      this.context.drawImage(this.image, w, y, x, h, 0, y, x, h);
    }window.CP.exitedLoop(0);

    if (this.step < this.stepTo) {
      this.step++;
      setTimeout(this.render.bind(this), Math.random() * 250);
    } else {
      this.destroy();
      this.onComplete && this.onComplete();
    }
  };

  function next() {
    var nodeFrom = current,
    nodeTo = current._next;

    current = current._next;
    nodeFrom.style.display = "block";
    var a = new Animation(nodeFrom),
    b;
    a.onComplete = function () {
      nodeFrom.style.display = "none";
      nodeTo.style.display = "block";
      b = new Animation(nodeTo);
      b.onComplete = next;
      b.show();
    };
    setTimeout(function () {a.hide();}, 3000);
  }
  function init() {
    nodes = Array.prototype.slice.call(document.querySelectorAll(".item"));
    nodes.forEach(function (value, index) {
      if (index == nodes.length - 1)
      nodes[index]._next = nodes[0];else

      nodes[index]._next = nodes[index + 1];
    });

    current = nodes[0];

    next();
  }

  document.addEventListener('DOMContentLoaded', function () {init();});
})();
    </script>
</body>
</html>

4. Text glitch on Hover

Made by Lars Steen MΓΈller. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
html,
body,
.container {
  height: 100%;
}
body,
html {
  background: #303030;
}
small {
  text-transform: uppercase;
  font-size: 8px;
}
.container {
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #212121;
}
a.btn {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2px;
}
a.btn:hover {
  color: gold;
}
</style>
</head>
<body>
  <div class="container">
<small>test</small><a href="#" class="btn text-code-hover-feel">Animate on hover OK?</a><small>teste</small>
</div>ddeetesd
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
$(document).ready(function () {

  var charPool = "!<>-_\\/[]{}β€”=+*^?#________"; // Code feel  
  var button = $('.text-code-hover-feel');
  button.attr("data-text-scramble-original", button.text());

  extrachars = button.text();
  var intevalzor;
  button.
  mouseenter(function () {
    intevalzor = setInterval(function () {myTimer();}, 300); // Do a random int

    function myTimer() {
      console.log("doo stuff");
      button.text(createRandomText(extrachars));

    }

  }).
  mouseleave(function () {
    $(this).text($(this).attr("data-text-scramble-original"));
    clearInterval(intevalzor);
  });

  function createRandomText(extrachars)
  {
    var text = "";
    var possible = "!<>-_\\/[]{}β€”=+*^?#________" + extrachars + extrachars + extrachars;

    for (var i = 0; i < 20; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
  }

  var lengthOfText = getLenghtOfString(button.text());
  var lengthOfPool = getLenghtOfString(charPool);
  // console.log("TextLength: ", lengthOfText);

  for (i = 0; i < lengthOfText; i++) {
    console.log("hejsa");
    var randomIntIndexText = selectRandomFrom(lengthOfText);
    var randomIntIndexPool = selectRandomFrom(lengthOfPool);
    var poolChar = getCharAtPosition(charPool, randomIntIndexPool);
  }

  // console.log("PoolLength ", lengthOfPool);
  // console.log("Random From Text: ", selectRandomFrom(lengthOfText)); 
  // console.log("Random From pool: ", selectRandomFrom(lengthOfPool));

  getCharAtPosition(charPool, selectRandomFrom(lengthOfPool));

  function getCharAtPosition(str, position) {
    return str.charAt(position + 1); //daspdksaoda
  }

  function replaceCharInString(index, char) {
    return str.substr(0, index) + 'char' + str.substr(index + 1);
  }


  function getLenghtOfString(element) {
    return element.length;
  }


  function selectRandomFrom(number) {
    //1 is the start number
    //"number" is the number of possible results (1 + start (number) - end (1))
    return Math.floor(Math.random() * number) + 1;
  }


  // usage str = str.replaceAt(3, "a");
  function replaceLetterAt(index, character) {
    return this.substr(0, index) + character + this.substr(index + character.length);
  }

});
    </script>
</body>
</html>

5. Text Glitch

Made by Michael Hibbs. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:200'>
  
<style>
* {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  
  padding: 0;
  margin: 0;
}

body {
  color: #555;
  font-family: "Titillium Web", helvetica, arial, sans-serif;
  background-color: #001331;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
}

.glitch-paragraph {
  width: 960px;
  position: relative;
  font-size: 4em;
  
  color: #fff;
}

.glitch-paragraph::before {
  display: initial;
  content: attr(data-text);
  position: absolute;
  top: -2px;
  left: -2px;
  text-shadow: 3px 0 #fe0000;
  background-color: #001d48;
  overflow: hidden;
  
  animation: glitch 3s infinite linear alternate-reverse;
}

@keyframes glitch {
    100% {
        -webkit-clip-path: inset(10px 0 183px 0);
        clip-path: inset(10px 0 183px 0)
    }

    95% {
        -webkit-clip-path: inset(124px 0 58px 0);
        clip-path: inset(124px 0 58px 0)
    }

    90% {
        -webkit-clip-path: inset(114px 0 85px 0);
        clip-path: inset(114px 0 85px 0)
    }

    85% {
        -webkit-clip-path: inset(79px 0 107px 0);
        clip-path: inset(79px 0 107px 0)
    }

    80% {
        -webkit-clip-path: inset(56px 0 139px 0);
        clip-path: inset(56px 0 139px 0)
    }

    75% {
        -webkit-clip-path: inset(21px 0 165px 0);
        clip-path: inset(21px 0 165px 0)
    }

    70% {
        -webkit-clip-path: inset(122px 0 31px 0);
        clip-path: inset(122px 0 31px 0)
    }

    65% {
        -webkit-clip-path: inset(50px 0 119px 0);
        clip-path: inset(50px 0 119px 0)
    }

    60% {
        -webkit-clip-path: inset(137px 0 37px 0);
        clip-path: inset(137px 0 37px 0)
    }

    55% {
        -webkit-clip-path: inset(65px 0 122px 0);
        clip-path: inset(65px 0 122px 0)
    }

    50% {
        -webkit-clip-path: inset(138px 0 21px 0);
        clip-path: inset(138px 0 21px 0)
    }

    45% {
        -webkit-clip-path: inset(2px 0 181px 0);
        clip-path: inset(2px 0 181px 0)
    }

    40% {
        -webkit-clip-path: inset(138px 0 59px 0);
        clip-path: inset(138px 0 59px 0)
    }

    35% {
        -webkit-clip-path: inset(20px 0 135px 0);
        clip-path: inset(20px 0 135px 0)
    }

    30% {
        -webkit-clip-path: inset(42px 0 157px 0);
        clip-path: inset(42px 0 157px 0)
    }

    25% {
        -webkit-clip-path: inset(48px 0 119px 0);
        clip-path: inset(48px 0 119px 0)
    }

    20% {
        -webkit-clip-path: inset(89px 0 76px 0);
        clip-path: inset(89px 0 76px 0)
    }

    15% {
        -webkit-clip-path: inset(129px 0 35px 0);
        clip-path: inset(129px 0 35px 0)
    }

    10% {
        -webkit-clip-path: inset(15px 0 142px 0);
        clip-path: inset(15px 0 142px 0)
    }

    5% {
        -webkit-clip-path: inset(123px 0 48px 0);
        clip-path: inset(123px 0 48px 0)
    }
}
</style>
</head>
<body>
  <div id="app">
  <div data-text='Lorem ipsum dolor sit amet, adipisicing hacker' class='glitch-paragraph'>
    Lorem ipsum dolor sit amet, adipisicing <span class="word-switcher" data-words='programmer,hacker'></span>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
      <script>
var elapsedTicks = 0;
var ticksToChange = 40;
var wordSwitchers = document.querySelectorAll(".word-switcher");

function jumbleWord(word) {
  var chars = "@#[]/?!";

  word.innerText = _.shuffle(chars.split('')).join('');
}

function randomizeWord(word) {
  var words = word.getAttribute("data-words").split(",");

  word.innerText = _.sample(words);
}

function tick() {
  elapsedTicks++;

  if (elapsedTicks < 10) {
    _.each(wordSwitchers, jumbleWord);
  } else if (elapsedTicks == 10) {
    _.each(wordSwitchers, randomizeWord);
  } else if (elapsedTicks > ticksToChange) {
    elapsedTicks = 0;
    ticksToChange = _.random(40, 80);
  }
}

setInterval(tick, 40);
    </script>
</body>
</html>

6. Text Glitch Reveal Animation

Made by Biotree. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/baffle.min.js"></script>
<style>
html,body{
  padding:0;
  margin:0;
  border:0;
  background-color:#0e1119;
}

.container{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.data{
  color:white;
  font-family:'Poppins',sans-serif;
  font-weight:500;
  text-align:centre;
  letter-spacing:.5rem;
  font-size:31px;
}
</style>
  </head>
  <body>
   <div class="container">
     <div class="data">IAMHARSH-WEB DEVELOPER</div>
      <script>
const text = baffle(".data");
text.set({
  characters: 'β–‘β–’β–‘ β–‘β–ˆβ–ˆβ–‘> β–ˆβ–ˆβ–ˆβ–ˆβ–“ >β–ˆ> β–‘/β–ˆ>β–ˆ β–ˆβ–ˆβ–‘β–‘ β–ˆ<β–’ β–“β–ˆβ–ˆβ–‘ β–‘/β–‘β–’',
  speed: 120 });


text.start();
text.reveal(4000);
    </script>
</body>
</html>

7. CSS Text Glitch Effect – Baffle

Made by Rahul Chaudhary. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
* {
    margin: 0;
    padding: 0;
}
body{
  color: #fff;
  backgrounf: #fff;
  font-family: Helvetica, sans-serif;
}
section{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #000;
}
.text__glitch{
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: Uppercase;
}
</style>
</head>
<body>
  <main>
  <section class="section--1">
    <h3 class="text__glitch">Text Glitch Effect Using Baffle.JS</h3>
  </section>
</main>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/baffle.min.js'></script>
      <script>
//Baffle
const text = baffle(".text__glitch");
text.set({
  characters: "β–ˆβ–“β–ˆ β–’β–‘/β–’β–‘ β–ˆβ–‘β–’β–“/ β–ˆβ–’β–’ β–“β–’β–“/β–ˆ β–‘β–ˆβ–’/ β–’β–“β–‘ β–ˆ<β–‘β–’ β–“/β–‘>",
  speed: 120 });

text.start();
text.reveal(4000);
    </script>
</body>
</html>

8. Text glitch effect

Made by TehMerow. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet"> 
<style>
html,
body {
  margin: 0;
  height: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
}
#cyberpunk {
  margin: 0;
  padding: 0;
  letter-spacing: 40px;
  filter: drop-shadow(0 0 20px hsla(320, 40%, 60%, 0.8));
  font-size: 64px;
  position: relative;
  z-index: 1;
  font-family: 'Passion One', cursive;
  font-style: italic;
}
.text:nth-child(1) {
  color: hsl(320, 90%, 90%);
  -webkit-clip-path: inset(40% 0% 40% 0%);
          clip-path: inset(40% 0% 40% 0%);
  z-index: 5;
}
.text:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: hsl(260, 90%, 80%);
  -webkit-clip-path: inset(0% 0% 60% 0%);
          clip-path: inset(0% 0% 60% 0%);
  -webkit-animation: random1 1000ms steps(1) alternate infinite;
          animation: random1 1000ms steps(1) alternate infinite;
}
.text:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: hsl(260, 90%, 50%);
  -webkit-clip-path: inset(60% 0% 0% 0%);
          clip-path: inset(60% 0% 0% 0%);
  -webkit-animation: random2 1000ms steps(1) alternate infinite;
          animation: random2 1000ms steps(1) alternate infinite;
}
.thing-1 {
  position: absolute;
  left: 0;
  top: 20%;
  height: 50%;
  width: 100%;
  background-color: hsl(225, 100%, 40%);
  z-index: -1;
  -webkit-animation: random-clip-1 20s steps(1) infinite;
          animation: random-clip-1 20s steps(1) infinite;
}
#scanline {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  background-size: 100% 2px;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div id="cyberpunk">
    <h1 class="text">huh?</h1>
    <h1 class="text">huh?</h1>
    <h1 class="text">huh?</h1>
    <div class="thing-1"></div>
  </div>  
  <div id="scanline"></div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
Math.Ran = function (max) {
  let rn = Math.round(Math.random() * max);
  rn *= Math.random() > 0.5 ? -1 : 1;
  return rn;
};

function generateRandomKeyFrames(dis, len, name) {
  let keyframes = ``;
  for (var i = 0; i < len; i++) {if (window.CP.shouldStopExecution(0)) break;
    keyframes += `${i / len * 100}%{transform: translateX(${Math.Ran(dis)}px)}`;
  }window.CP.exitedLoop(0);

  let style = document.createElement('style');
  style.innerHTML = `@keyframes ${name} { ${keyframes} }`;

  document.body.appendChild(style);
}
function generateRandomClipFrames(len, name) {
  let keyframes = ``;
  let size = 100;
  for (var i = 0; i < len; i++) {if (window.CP.shouldStopExecution(1)) break;
    keyframes +=
    `${i / len * 100}%{
    clip-path: inset(${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}%)
}`;
  }window.CP.exitedLoop(1);

  let style = document.createElement('style');
  style.innerHTML = `@keyframes ${name} {
${keyframes} 
}`;

  document.body.appendChild(style);
}

generateRandomKeyFrames(15, 16, "random1");
generateRandomKeyFrames(10, 10, "random2");
generateRandomClipFrames(200, "random-clip-1");
    </script>
</body>
</html>