Как сделать такой эффект как на скриншоте с эффектом смещения?

@import "https://fonts.googleapis.com/css?family=Orbitron"; 
 
html, 
body { 
  background-color: #000; 
  text-align: center; 
  padding: 10%; 
} 
 
.content { 
  color: #62C85B; 
  font-family: 'Orbitron', sans-serif; 
  font-size: 100px; 
  font-weight: bold; 
  color: #61F5A1; 
  position: relative; 
} 
 
@keyframes glitch-anim-1 { 
  0% { 
    clip: rect(60px, 1084px, 10px, 0); 
  } 
  5.8823529412% { 
    clip: rect(104px, 1084px, 63px, 0); 
  } 
  11.7647058824% { 
    clip: rect(67px, 1084px, 72px, 0); 
  } 
  17.6470588235% { 
    clip: rect(61px, 1084px, 101px, 0); 
  } 
  23.5294117647% { 
    clip: rect(5px, 1084px, 5px, 0); 
  } 
  29.4117647059% { 
    clip: rect(105px, 1084px, 85px, 0); 
  } 
  35.2941176471% { 
    clip: rect(40px, 1084px, 45px, 0); 
  } 
  41.1764705882% { 
    clip: rect(9px, 1084px, 81px, 0); 
  } 
  47.0588235294% { 
    clip: rect(62px, 1084px, 76px, 0); 
  } 
  52.9411764706% { 
    clip: rect(72px, 1084px, 104px, 0); 
  } 
  58.8235294118% { 
    clip: rect(99px, 1084px, 4px, 0); 
  } 
  64.7058823529% { 
    clip: rect(43px, 1084px, 88px, 0); 
  } 
  70.5882352941% { 
    clip: rect(78px, 1084px, 7px, 0); 
  } 
  76.4705882353% { 
    clip: rect(12px, 1084px, 20px, 0); 
  } 
  82.3529411765% { 
    clip: rect(112px, 1084px, 40px, 0); 
  } 
  88.2352941176% { 
    clip: rect(106px, 1084px, 113px, 0); 
  } 
  94.1176470588% { 
    clip: rect(69px, 1084px, 69px, 0); 
  } 
  100% { 
    clip: rect(23px, 1084px, 68px, 0); 
  } 
} 
 
@keyframes glitch-anim-2 { 
  0% { 
    clip: rect(114px, 1084px, 104px, 0); 
  } 
  5.8823529412% { 
    clip: rect(91px, 1084px, 83px, 0); 
  } 
  11.7647058824% { 
    clip: rect(64px, 1084px, 106px, 0); 
  } 
  17.6470588235% { 
    clip: rect(115px, 1084px, 109px, 0); 
  } 
  23.5294117647% { 
    clip: rect(66px, 1084px, 25px, 0); 
  } 
  29.4117647059% { 
    clip: rect(59px, 1084px, 57px, 0); 
  } 
  35.2941176471% { 
    clip: rect(115px, 1084px, 102px, 0); 
  } 
  41.1764705882% { 
    clip: rect(94px, 1084px, 51px, 0); 
  } 
  47.0588235294% { 
    clip: rect(17px, 1084px, 30px, 0); 
  } 
  52.9411764706% { 
    clip: rect(111px, 1084px, 66px, 0); 
  } 
  58.8235294118% { 
    clip: rect(58px, 1084px, 113px, 0); 
  } 
  64.7058823529% { 
    clip: rect(69px, 1084px, 1px, 0); 
  } 
  70.5882352941% { 
    clip: rect(108px, 1084px, 13px, 0); 
  } 
  76.4705882353% { 
    clip: rect(32px, 1084px, 18px, 0); 
  } 
  82.3529411765% { 
    clip: rect(33px, 1084px, 36px, 0); 
  } 
  88.2352941176% { 
    clip: rect(92px, 1084px, 49px, 0); 
  } 
  94.1176470588% { 
    clip: rect(3px, 1084px, 49px, 0); 
  } 
  100% { 
    clip: rect(35px, 1084px, 86px, 0); 
  } 
} 
 
.content:before, 
.content:after { 
  content: attr(data-text); 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  background: black; 
  clip: rect(0, 0, 0, 0); 
} 
 
.content:after { 
  left: 2px; 
  text-shadow: -1px 0 red; 
  animation: glitch-anim-1 2s infinite linear alternate-reverse; 
} 
 
.content:before { 
  left: -2px; 
  text-shadow: 2px 0 blue; 
  animation: glitch-anim-2 3s infinite linear alternate-reverse; 
}

<div class="content" data-text="lensky">lensky</div>

$("header").append("<div class='glitch-window'></div>"); 
//fill div with clone of real header 
$("h1.glitched").clone().appendTo(".glitch-window");

* { 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
body { 
  font-family: 'Raleway', sans-serif; 
  background: #F9F8F8; 
} 
 
header.header { 
  position: absolute; 
  top: 50%; 
  left: 0; 
  width: 100%; 
  -webkit-transform: translateY(-50%); 
  transform: translateY(-50%); 
} 
 
header.header h1 { 
  font-size: 8rem; 
  color: #222222; 
  text-align: center; 
  margin-top: 0; 
  text-transform: uppercase; 
  font-weight: 900; 
} 
 
.glitch-window { 
  position: absolute; 
  top: 0; 
  left: -2px; 
  width: 100%; 
  color: #222222; 
  text-shadow: 2px 0 #F9F8F8, -1px 0 yellow, -2px 0 green; 
  overflow: hidden; 
  animation: crt-me 2500ms infinite linear alternate-reverse; 
} 
 
@-webkit-keyframes crt-me { 
  0% { 
    clip: rect(31px, 9999px, 94px, 0); 
  } 
  10% { 
    clip: rect(112px, 9999px, 76px, 0); 
  } 
  20% { 
    clip: rect(85px, 9999px, 77px, 0); 
  } 
  30% { 
    clip: rect(27px, 9999px, 97px, 0); 
  } 
  40% { 
    clip: rect(64px, 9999px, 98px, 0); 
  } 
  50% { 
    clip: rect(61px, 9999px, 85px, 0); 
  } 
  60% { 
    clip: rect(99px, 9999px, 114px, 0); 
  } 
  70% { 
    clip: rect(34px, 9999px, 115px, 0); 
  } 
  80% { 
    clip: rect(98px, 9999px, 129px, 0); 
  } 
  90% { 
    clip: rect(43px, 9999px, 96px, 0); 
  } 
  100% { 
    clip: rect(82px, 9999px, 64px, 0); 
  } 
} 
 
@keyframes crt-me { 
  0% { 
    clip: rect(31px, 9999px, 94px, 0); 
  } 
  10% { 
    clip: rect(112px, 9999px, 76px, 0); 
  } 
  20% { 
    clip: rect(85px, 9999px, 77px, 0); 
  } 
  30% { 
    clip: rect(27px, 9999px, 97px, 0); 
  } 
  40% { 
    clip: rect(64px, 9999px, 98px, 0); 
  } 
  50% { 
    clip: rect(61px, 9999px, 85px, 0); 
  } 
  60% { 
    clip: rect(99px, 9999px, 114px, 0); 
  } 
  70% { 
    clip: rect(34px, 9999px, 115px, 0); 
  } 
  80% { 
    clip: rect(98px, 9999px, 129px, 0); 
  } 
  90% { 
    clip: rect(43px, 9999px, 96px, 0); 
  } 
  100% { 
    clip: rect(82px, 9999px, 64px, 0); 
  } 
}

<header class="header"> 
  <h1 class="glitched">lensky</h1> 
</header> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>