RATTLETHESEBONES

index.jade

.tag
  span r
  span a
  span t
  span t
  span l
  span e
  span t
  span h
  span e
  span s
  span e
  span b
  span o
  span n
  span e
  span s

RATTLETHESEBONES.markdown

RATTLETHESEBONES

Just basic text transforms.

A Pen by ZCKVNS on CodePen.

License.

style.scss

@import url(http://fonts.googleapis.com/css?family=Amatic+SC);

html {
  font-size: 16px;
  @media (min-width: 500px) {
    font-size: 20px;
  }
  @media (min-width: 700px) {
    font-size: 25px;
  }
  @media (min-width: 900px) {
    font-size: 30px;
  }
  @media (min-width: 1100px) {
    font-size: 35px;
  }
  @media (min-width: 1300px) {
    font-size: 40px;
  }
}

body {
  background: #292929;
}

.tag {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  &:before, &:after {
    content: '';
    height: 3px;
    background: #fff;
    width: 20%;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

span {
  font-family: Amatic SC;
  font-size: 3rem;
  color: #fff;
  animation: rattle 20s infinite linear;
  animation-direction: alternate;
  display: inline-block;
  $x: 1;
  @while $x <= 16 {
    &:nth-child(#{$x}) {
      animation-delay: $x * .5 + s;
    }
  $x: $x + 1;
  }
}

$a: 0;
@keyframes rattle {
  @while $a <= 100 {
    $r1: random(6);
    $r2: -1 * random(12);
    #{$a}% {
      @if $a%2 == 0 {
        transform: rotate($r1 + deg);
      }
      @else {
        transform: rotate($r2 + deg);
      }
    }
    $a: $a + 1;
  }
}