1. 完成版

2. なぜか？

Glorious Demo という、リアルタイムでコーディングしているかのように見えるライブラリがあります。
最初見たとき、とても画期的なツールだと思いました。だいぶ主観が入りますが、プログラミングを学ぶ時に、本からの静的なコンテンツからの勉強は効率が悪いと感じてます。コードも出来上がるまでに紆余曲折があり、プログラマーの悩みやエラーの修正などをへて、コードが完成します。その生々しい過程を見ることは、私のような初学者にとって重要に思います。ブログの勢いが落ち、Youtubeなどの動画コンテンツに注目が集まるようになった昨今、今後のプログラムの勉強教材はUdemy をはじめとした動画へと移っていくと思ってます。(と言いつつ、Qiitaは、今後も投稿していきます)

長くなりましたが、よしこさんのポートフォリオは、アニメーション +コーディングをブラウザ上で表現でされており、大変感動しました。皆様もぜひご覧ください。

3. 参考文献

CSS Tricks

4. 分解してみる

では早速コードを書いていきます。

❶.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />

  </head>
  <body>
    <h1>I learn CSS animation every day.</h1>
  </body>
</html>

styles.css

body {
  margin: 0px;
  padding: 0px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

では次に、タイプする時に出てくる縦線を作り、背景と文字の色をかえます。

styles.css

body {
  margin: 0px;
  padding: 0px;
  background: #364548;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 3px;
  border-right: 5px solid orange;
}

いい感じです。
では、アニメーションをつけていきましょう。
どうやったら良いでしょうか？
ヒントは、以前の記事です。

❷.

styles.css


h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  letter-spacing: 3px;
  border-right: 5px solid orange;
  overflow: hidden;
  white-space: nowrap;
  animation: type 5s steps(32, end);
}

@keyframes type {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

steps また出てきましたね。
h1のwidth を0% から100% にし、steps で段階的に画面に表示すれば完成です。

その他のポイントは、
white-space: nowrap で、文章を1文にしてます。
overflow: hiddenで要素の幅以上にはみ出た部分を、非表示にしてます。これらは、サルワカの記事が大変わかりやすく書いてありました。

最後に、オレンジのバーにもアニメーションをつけましょう。

❸.

styles.css

...

animation: type 5s steps(32), bar 1s step-end infinite;
}

@keyframes type {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes bar {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

あれれ、文章が消えてしまいました。全体にopacity: 0つければ、消えてしまうの当たり前ですね。どうしたら良いでしょうか？

・・・

bar は border なので、border の色を変えれば良いですね！　

styles.css


@keyframes bar {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
  100% {
    border-color: transparent;
  }
}

できました。
他に Javascript を使ってもっと細かい表現ができるようです。

それでは、また明日〜

CSS animation で遊び倒す - Typewriter Effect -

1. 完成版

2. なぜか？

3. 参考文献

4. 分解してみる