LOADING...

Glithbox »

@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700); html,body{overflow:hidden;height:100%;-webkit-overflow-scrolling:touch} #result{border:0;width:100%;height:100%;display:block} .glitchy-holder { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; text-align: center; user-select: none; background: black; } .glitchy h1 { font-family: "Oswald"; text-align: center; font-size: 100px; width: 100%; position: absolute; overflow: hidden; margin-left: -15px; color: transparent; text-shadow: 0px 0px 3px #eee, 5px 5px 2px teal, -5px -2px 2px #7f0000; font-weight: 400; -moz-transform: skewX(0deg); -ms-transform: skewX(0deg); -webkit-transform: skewX(0deg); transform: skewX(0deg); -moz-animation: shift 4s ease-in-out infinite alternate; -webkit-animation: shift 4s ease-in-out infinite alternate; animation: shift 4s ease-in-out infinite alternate; } @-moz-keyframes shift { 0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% { -moz-transform: skewX(0deg); transform: skewX(0deg); } 41% { -moz-transform: skewX(10deg); transform: skewX(10deg); } 42% { -moz-transform: skewX(-10deg); transform: skewX(-10deg); } 59% { -moz-transform: skewX(40deg) skewY(10deg); transform: skewX(40deg) skewY(10deg); } 60% { -moz-transform: skewX(-40deg) skewY(-10deg); transform: skewX(-40deg) skewY(-10deg); } 63% { -moz-transform: skewX(10deg) skewY(-5deg); transform: skewX(10deg) skewY(-5deg); } 70% { -moz-transform: skewX(-50deg) skewY(-20deg); transform: skewX(-50deg) skewY(-20deg); } 71% { -moz-transform: skewX(10deg) skewY(-10deg); transform: skewX(10deg) skewY(-10deg); } } @-webkit-keyframes shift { 0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% { -webkit-transform: skewX(0deg); transform: skewX(0deg); } 41% { -webkit-transform: skewX(10deg); transform: skewX(10deg); } 42% { -webkit-transform: skewX(-10deg); transform: skewX(-10deg); } 59% { -webkit-transform: skewX(40deg) skewY(10deg); transform: skewX(40deg) skewY(10deg); } 60% { -webkit-transform: skewX(-40deg) skewY(-10deg); transform: skewX(-40deg) skewY(-10deg); } 63% { -webkit-transform: skewX(10deg) skewY(-5deg); transform: skewX(10deg) skewY(-5deg); } 70% { -webkit-transform: skewX(-50deg) skewY(-20deg); transform: skewX(-50deg) skewY(-20deg); } 71% { -webkit-transform: skewX(10deg) skewY(-10deg); transform: skewX(10deg) skewY(-10deg); } } @keyframes shift { 0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% { -moz-transform: skewX(0deg); -ms-transform: skewX(0deg); -webkit-transform: skewX(0deg); transform: skewX(0deg); } 41% { -moz-transform: skewX(10deg); -ms-transform: skewX(10deg); -webkit-transform: skewX(10deg); transform: skewX(10deg); } 42% { -moz-transform: skewX(-10deg); -ms-transform: skewX(-10deg); -webkit-transform: skewX(-10deg); transform: skewX(-10deg); } 59% { -moz-transform: skewX(40deg) skewY(10deg); -ms-transform: skewX(40deg) skewY(10deg); -webkit-transform: skewX(40deg) skewY(10deg); transform: skewX(40deg) skewY(10deg); } 60% { -moz-transform: skewX(-40deg) skewY(-10deg); -ms-transform: skewX(-40deg) skewY(-10deg); -webkit-transform: skewX(-40deg) skewY(-10deg); transform: skewX(-40deg) skewY(-10deg); } 63% { -moz-transform: skewX(10deg) skewY(-5deg); -ms-transform: skewX(10deg) skewY(-5deg); -webkit-transform: skewX(10deg) skewY(-5deg); transform: skewX(10deg) skewY(-5deg); } 70% { -moz-transform: skewX(-50deg) skewY(-20deg); -ms-transform: skewX(-50deg) skewY(-20deg); -webkit-transform: skewX(-50deg) skewY(-20deg); transform: skewX(-50deg) skewY(-20deg); } 71% { -moz-transform: skewX(10deg) skewY(-10deg); -ms-transform: skewX(10deg) skewY(-10deg); -webkit-transform: skewX(10deg) skewY(-10deg); transform: skewX(10deg) skewY(-10deg); } }

Enable JavaScript
or scram!