@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600);
body{
font-family: 'Varela', sans-serif;
//demo only, although x is probably always necessary
overflow: hidden;
}
.wrap {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/glitch-bg.png) center center no-repeat;
background-size: contain;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.glitch{
font-family: 'Exo 2', sans-serif;
font-weight: 600;
color:white;
font-size:100px;
position:relative;
margin:0 auto;
text-shadow:
0px -5px 10px rgba(255,255,255,1),
0px 0px 5px rgba(255,255,255,0),
0px 0px 10px rgba(255,255,255,0),
0px 0px 15px rgba(255,255,255,0),
0px 0px 20px rgba(255,255,255,0);
animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
@include transform(skewX(0deg));
}
@include keyframes(blur){
0%,40%, 50%, 60%, 90%, 95%, 100%{
text-shadow:
0px -5px 10px rgba(255,255,255,1),
0px 0px 5px rgba(255,255,255,0),
0px 0px 10px rgba(255,255,255,0),
2px 1px 15px rgba(100,240,255,0),
0px 0px 20px rgba(255,255,255,0);
}
45%, 75% {
text-shadow:
0px -5px 10px rgba(255,255,255,1),
0px 0px 5px rgba(255,255,255,1),
0px 0px 10px rgba(255,255,255,1),
2px 1px 15px rgba(100,240,255,1),
0px 0px 20px rgba(255,255,255,1);
}
97.5% {
text-shadow:
0px -5px 10px rgba(255,255,255,0),
0px 0px 5px rgba(255,255,255,0),
0px 0px 10px rgba(255,255,255,0),
2px 1px 4px rgba(255,100,100,1),
0px 0px 20px rgba(255,255,255,0);
}
}
.glitch:after{
content:attr(data-text);
position:absolute;
left:3px;
text-shadow: -1px 0 red;
top:0;
color: transparent;
background: transparent;
overflow:hidden;
clip:rect(0,900px,0,0);
animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
@include transform(skewX(0deg));
z-index: -2;
opacity: .7;
}
.glitch:before{
content:attr(data-text);
position:absolute;
left:1px;
text-shadow: -3px 0 cyan;
top:0;
color: transparent;
background: transparent;
overflow: hidden;
clip:rect(0,900px,0,0);
animation:noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
@include transform(skewX(0deg));
z-index: -1;
opacity: .8;
}
@keyframes noise-anim{
$steps:20;
@for $i from 0 through $steps{
#{percentage($i*(1/$steps))}{
clip:rect(random(100)+px,9999px,random(100)+px,0);
}
}
}
@keyframes noise-anim-2{
$steps:20;
@for $i from 0 through $steps{
#{percentage($i*(1/$steps))}{
clip:rect(random(100)+px,9999px,random(100)+px,0);
}
}
}
@include keyframes(shift){
0%,40%, 44%, 58%, 61%, 65%,69%,73%,100%{
@include transform(skewX(0deg))
}
41%{
@include transform(skewX(10deg));
}
42%{
@include transform(skewX(-10deg));
}
59%{
@include transform(skewX(40deg) skewY(10deg));
}
60%{
@include transform(skewX(-40deg) skewY(-10deg));
}
63%{
@include transform(skewX(10deg) skewY(-5deg));
}
70%{
@include transform(skewX(-50deg) skewY(-20deg));
}
71%{
@include transform(skewX(10deg) skewY(-10deg));
}
}
View Compiled