1 // Lucas Bebber's Glitch Effect
2 // Tutorial and CSS from CSS Tricks
3 // https://css-tricks.com/glitch-effect-text-images-svg/
12 @keyframes noise-anim {
14 @for $i from 0 through $steps {
15 #{percentage($i*(1/$steps))} {
16 clip: rect(random(100)+px,9999px,random(100)+px,0);
21 content: attr(data-text);
24 text-shadow: -1px 0 $red;
27 background: $gray-100;
29 clip: rect(0,900px,0,0);
30 animation: noise-anim 2s infinite linear alternate-reverse;
33 @keyframes noise-anim-2 {
35 @for $i from 0 through $steps {
36 #{percentage($i*(1/$steps))} {
37 clip: rect(random(100)+px,9999px,random(100)+px,0);
42 content: attr(data-text);
45 text-shadow: 1px 0 $blue;
48 background: $gray-100;
50 clip: rect(0,900px,0,0);
51 animation: noise-anim-2 3s infinite linear alternate-reverse;