JavaScriptでタイプライターのようなエフェクトを実装する方法と解説【サンプルコード付き】

JavaScript

ChatGPTをお使いになった方は多いと思います。ChatGPTは対話型のAIで質問を送信すると回答がタイプライターのように返ってきます。今回はこのChatGPTのように1文字ずつ文章を表示させるエフェクトを実装してみます。

以下のデモの基本仕様は

  • 指定した要素に含まれるテキストを、一文字ずつ順番に表示する。
  • 一文字を表示する時間間隔は、指定した遅延時間になる。
  • テキストが全て表示された後、アニメーションを停止する。
  • アニメーションを手動(クリック)で停止することができる。
  • カーソルは点滅しながら末尾に居続ける。
  • jQuery不使用

になります。

タイプライター風エフェクトのデモンストレーション

英字

和文

トルコ語

ソースコード(HTML, CSS, JavaScript)紹介

<h3>トルコ語</h3>
<p id="typewriter-text03"></p>
#typewriter-text03 {
  color: #333;
}
#typewriter-text03::after {
  content: "|";
  animation: blink 1s infinite;
}
const text03 = 'Bu bir daktilo örneğidir, ancak doğruysa, JavaScript\'te yazmak yerine sunucudan ajax vb. kullanılarak elde edilen bir karakter dizisini tek tek görüntülemek için kullanılmalıdır. jQuery\'nin $.ajax\'ı da iyidir, bu yüzden lütfen kendi sunucunuza bir istek yaptığınızda döndürülen dizeyi almak için PHP\'yi kullanın.';
const textDOM03 = document.getElementById('typewriter-text03');
const delay03 = 75; // 一文字追加する間隔(ミリ秒)
let index03 = 0;

function type03() {
  textDOM03.innerHTML += text03[index03]; // 一文字追加する
  index03++;
  if (index03 >= text03.length - 1) {
    clearInterval(intervalId03); // アニメーションを終了する
  }
}
textDOM03.classList.add('typing'); // タイピング中のクラスを追加する

const intervalId03 = setInterval(type03, delay03);

// マウスクリックでアニメーションを停止する
document.addEventListener('click', () => {
  clearInterval(intervalId03);
  textDOM03.classList.remove('typing');
});
タイトルとURLをコピーしました