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

#css #clip_path #svg_animation

Хотелось бы реализовать такой эффект как на скрине :



Разумеется хотя бы с 90% поддержкой но как можно проще. 

Как это можно реализовать ?
    

Ответы

Ответ 1

Удалось реализовать только средствами clip-path на css.



@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;
}
lensky




пример смотреть на весь экран


Ответ 2

Не хотел я jQuery применять но не нашёл другого выхода ... 

реализация второго скрина



$("header").append("
");
//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);
  }
}

  
lensky