Хотелось бы реализовать такой эффект как на скрине :
Разумеется хотя бы с 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);
}
}
