Skip to content

Instantly share code, notes, and snippets.

@neovea
Created October 15, 2014 13:43
Show Gist options
  • Save neovea/507f06958b72c56544f8 to your computer and use it in GitHub Desktop.
Save neovea/507f06958b72c56544f8 to your computer and use it in GitHub Desktop.
A Pen by Lucas Bebber.
<link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<div class="glitch" data-text="GLITCH">GLITCH</div>
@import "compass/css3";
body{
background:black;
font-family: 'Varela', sans-serif;
}
.glitch{
color:white;
font-size:100px;
position:relative;
width:400px;
margin:0 auto;
}
@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);
}
}
}
.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;
}
@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);
}
}
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment