<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header class="header">
<h1 class="glitched">Glitch</h1>
</header>
<script>
$("header").append("<div class='glitch-window'></div>");
//fill div with clone of real header
$( "h1.glitched" ).clone().appendTo( ".glitch-window" );
</script>
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
background: #F9F8F8;
}
header.header {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
header.header h1 {
font-size: 8rem;
color: #222222;
text-align: center;
margin-top: 0;
text-transform: uppercase;
font-weight: 900;
}
.glitch-window {
position: absolute;
top: 0;
left: -2px;
width: 100%;
color: #222222;
text-shadow: 2px 0 #F9F8F8, -1px 0 yellow, -2px 0 green;
overflow: hidden;
-webkit-animation: crt-me 2500ms infinite linear alternate-reverse;
animation: crt-me 2500ms infinite linear alternate-reverse;
}
@-webkit-keyframes crt-me {
0% {
clip: rect(31px, 9999px, 94px, 0);
}
10% {
clip: rect(112px, 9999px, 76px, 0);
}
20% {
clip: rect(85px, 9999px, 77px, 0);
}
30% {
clip: rect(27px, 9999px, 97px, 0);
}
40% {
clip: rect(64px, 9999px, 98px, 0);
}
50% {
clip: rect(61px, 9999px, 85px, 0);
}
60% {
clip: rect(99px, 9999px, 114px, 0);
}
70% {
clip: rect(34px, 9999px, 115px, 0);
}
80% {
clip: rect(98px, 9999px, 129px, 0);
}
90% {
clip: rect(43px, 9999px, 96px, 0);
}
100% {
clip: rect(82px, 9999px, 64px, 0);
}
}
@keyframes crt-me {
0% {
clip: rect(31px, 9999px, 94px, 0);
}
10% {
clip: rect(112px, 9999px, 76px, 0);
}
20% {
clip: rect(85px, 9999px, 77px, 0);
}
30% {
clip: rect(27px, 9999px, 97px, 0);
}
40% {
clip: rect(64px, 9999px, 98px, 0);
}
50% {
clip: rect(61px, 9999px, 85px, 0);
}
60% {
clip: rect(99px, 9999px, 114px, 0);
}
70% {
clip: rect(34px, 9999px, 115px, 0);
}
80% {
clip: rect(98px, 9999px, 129px, 0);
}
90% {
clip: rect(43px, 9999px, 96px, 0);
}
100% {
clip: rect(82px, 9999px, 64px, 0);
}
}
.inspiration-button {
font-family: Helvetica, sans-serif;
position: fixed;
display: inline-block;
z-index: 100;
bottom: 1rem;
left: 50%;
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
color: white;
text-decoration: none;
padding: 0.75rem 1rem;
border-radius: 80px;
background: -webkit-linear-gradient(right, #1e80dc, #c61590);
background: linear-gradient(270deg, #1e80dc, #c61590);
-webkit-transition: -webkit-transform 250ms ease;
transition: -webkit-transform 250ms ease;
transition: transform 250ms ease;
transition: transform 250ms ease, -webkit-transform 250ms ease;
}
.inspiration-button:hover, .inspiration-button:focus, .inspiration-button:active {
-webkit-transform: translate(-50%, -10%);
transform: translate(-50%, -10%);
}
