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');
});
