Glitch Text Effect

HTML
<div class='main'> <div class='head'> <h1>POWER</h1> </div> </div>
SCSS
@import "compass/css3"; html { background: black; } .main { width: 650px; height: 350px; position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -325px; overflow: hidden; text-align: center; } .head h1 { font-family: "Oswald"; text-align: center; font-size: 10vw; width: 100%; position: absolute; overflow: hidden; margin-left: -15px; color: transparent; text-shadow: 0px 0px 3px #eee, 5px 5px 2px teal, -5px -2px 2px mix(black,red,50); font-weight: 400; @include transform(skewX(0deg)); @include animation(shift 4s ease-in-out infinite alternate); } @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)); } }
JAVASCRIPT
Expand for more options Login