Glitch

glitch.markdown

Glitch

A Pen by Christian Petersen on CodePen.

License.

index.html

<main class="center">
  <h1>
    <span class="glitch" data-text="help•">
      hello
    </span>
  </h1>
</main>

style.scss

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

$bg-color: #4242e6;
$glitch-bg-color: $bg-color;

html, body {
  height: 100%;
}

body {
  font-family: 'Press Start 2P', cursive;
  font-size: 16px;
  font-weight: bold;
  color: #a5a5ff;
  background-color: $bg-color;
}

/* unvisited link */
a:link {
  color: #FFF;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #FFF;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #FF00F0;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #4242e6;
  text-decoration: none;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

h1 {
  display: block;
  font-size: 3em;
  margin: 0.6em 0;
  font-weight: bold;
}

.glitch {
  position: relative;
  margin: 0 auto;
  background: $glitch-bg-color;
}

.glitch::before,
.glitch::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: attr(data-text);
}

.glitch::after {
  animation-name: glitch-animation;
  animation-duration: 4s;
  left: 4px;
  text-shadow: -1px 0 #ffa800;
  background: $glitch-bg-color;
}

.glitch::before {
  animation-name: glitch-animation-2;
  animation-duration: 6s;
  left: -4px;
  text-shadow: 1px 0 #00d8ff;
  background: $glitch-bg-color;
}

@mixin rect($top, $bottom) {
  clip: rect($top, 9999px, $bottom, 0);
}

/* Expanded Animations */
@keyframes glitch-animation {
  0% { @include rect(42px, 44px); }
  5% { @include rect(12px, 59px); }
  10% { @include rect(48px, 29px); }
  15.0% { @include rect(42px, 73px); }
  20% { @include rect(63px, 27px); }
  25% { @include rect(34px, 55px); }
  30.0% { @include rect(86px, 73px); }
  35% { @include rect(20px, 20px); }
  40% { @include rect(26px, 60px); }
  45% { @include rect(25px, 66px); }
  50% { @include rect(57px, 98px); }
  55.0% { @include rect(5px, 46px); }
  60.0% { @include rect(82px, 31px); }
  65% { @include rect(54px, 27px); }
  70% { @include rect(28px, 99px); }
  75% { @include rect(45px, 69px); }
  80% { @include rect(23px, 85px); }
  85.0% { @include rect(54px, 84px); }
  90% { @include rect(45px, 47px); }
  95% { @include rect(37px, 20px); }
  100% { @include rect(4px, 91px); }
}

@keyframes glitch-animation-2 {
  0% { @include rect(65px, 100px); }
  5% { @include rect(52px, 74px); }
  10% { @include rect(79px, 85px); }
  15.0% { @include rect(75px, 5px); }
  20% { @include rect(67px, 61px); }
  25% { @include rect(14px, 79px); }
  30.0% { @include rect(1px, 66px); }
  35% { @include rect(86px, 30px); }
  40% { @include rect(23px, 98px); }
  45% { @include rect(85px, 72px); }
  50% { @include rect(71px, 75px); }
  55.0% { @include rect(2px, 48px); }
  60.0% { @include rect(30px, 16px); }
  65% { @include rect(59px, 50px); }
  70% { @include rect(41px, 62px); }
  75% { @include rect(2px, 82px); }
  80% { @include rect(47px, 73px); }
  85.0% { @include rect(3px, 27px); }
  90% { @include rect(26px, 55px); }
  95% { @include rect(42px, 97px); }
  100% { @include rect(38px, 49px); }
}