Code with Jason

code-with-jason.markdown

Code with Jason

A Pen by Yu Chun Man Jason on CodePen.

License.

index.html

<div class="centered">
  <div id="logo" class="prefix-rotating"></div>
</div>

script.babel

const SPIN_DURATION = (n) => n*500;
const TYPING_DURATION = 2000;
const DELAY_BEFORE_TYPING = SPIN_DURATION(2);
const DELAY_BEFORE_STOP_SPINNING = TYPING_DURATION + DELAY_BEFORE_TYPING + SPIN_DURATION(2);

const logo = document.getElementById('logo');

const logo_text = '> Code with Jason';
const logo_fill_arr = logo_text.split('').reverse();

setTimeout(() => {
  var id = setInterval(() => {
    if(logo_fill_arr.length === 0) return clearInterval(id)
    logo.innerHTML += logo_fill_arr.pop();
  }, TYPING_DURATION/logo_fill_arr.length)
}, DELAY_BEFORE_TYPING);

setTimeout(() => {
  logo.classList.add('prefix')
  logo.classList.remove('prefix-rotating')
}, DELAY_BEFORE_STOP_SPINNING);

style.scss

$font-stack: "ubuntu";
$background-color: #002b36;
$font-color: #657b83;

@keyframes rotate {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}
.rotating{
  animation: rotate 0.5s infinite;
}

body, html{
  font-family: $font-stack;
  background: $background-color;
  color: $font-color;
  height: 100%;
}
.centered{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}
#logo{
}
.prefix::before{
  content: '/';
  display: inline-block;
}
.prefix-rotating::before{
  @extend .prefix;
  @extend .rotating;
}

styles

<link href="//fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" />