JavaScriptとCSSアニメーションでタイピング風表示を行う

こんなやつ

動作デモ → https://jsfiddle.net/sr5me9k6/

結論

iTyped.jsを使う。

一文字ずつ表示させる処理

HTML

<p id="typing"></p>

JavaScript

const typing = (element, sentence) => {
  [...sentence].forEach((character, index) => {
    setTimeout(() => {
      document.querySelector(element).textContent += character;
    }, 100 * ++index);
  });
}

typing('#typing', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.');

特徴としては、第ニ引数で取った文字列をスプレッド演算子を用いて配列化しています。
例えば上記のコードでは文字数が多いので、代わりにconsole.log([...'Hello'])を実行して確認してみると、配列内は以下のようになっています。

（一文字ずつ配列に格納されている）

これをforEachで100 * (index + 1)ms後に実行されるタイマーに一文字ずつ追加しています。

また今回はJS側から文字を入力しましたが、HTML内のテキストをタイピング表示にしたい場合は、一度textContentを取得した後で何らかの変数に格納し、その後textContentを空にして、上記と同じ処理を行うと良いと思います。

カーソルのアニメーション

css

p::after {
  content: '';
  border-right: 2px solid;
  animation: flashing 0.6s linear infinite;
}

@keyframes flashing {
  0% {
    opacity: 0;
  }
}

こちらはとても単純で、疑似要素::afterでカーソルのようなものを描画し、それのopacityを切り替えて点滅を表現しています。

出来ました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ