タイピング効果を実現するのは非常に簡単です。純粋な英語環境を使用している場合、chという単位と等幅フォントを基にして簡単にタイピング効果を実現できますが、こうして実現した効果はもちろん限られています。まずはコードを見てみましょう：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピング効果</title>
<style>
.typewriter {
display: inline-block;
font-family: monospace;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid black; /* カーソルを模擬 */
width: 20ch; /* 文字表示の幅 */
animation: typing 3.5s steps(5) 1s forwards, blink 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 20ch;
}
}
@keyframes blink {
from, to {
border-color: transparent;
}
50% {
border-color: black;
}
}
</style>
</head>
<body>
<div class="typewriter">タイピング効果</div>
</body>
</html>
簡単なstepアニメーションを使うことで、タイピング効果を簡単に作成できますが、問題はどこにあるのでしょうか？
-
chはフォントファイル内の「0」の幅であり、字間を調整すると無効になります。また、「0」の幅であるため、一般的にはラテン文字のみを処理でき、中国語などの非ラテン文字は幅が異なるため完璧にサポートできません。 -
タイピングの長さに応じて手動で
stepの数を指定する必要があります。 -
文字を変更する際には、
cssファイルも同時に変更する必要があります。 -
翻訳プラグインがテキストを翻訳した場合、無効になります。
純粋なcssソリューションには問題が多いため、もちろんjsを使用してこの問題を解決することを考えます。
他の人が書いたタイピングライブラリを使用して、洗練されたタイピング効果を利用できます。
例えば：https://github.com/tameemsafi/typewriterjs
このライブラリは豊富な機能を提供しており、テキストタグを分割したり、複数のテキストに異なるアニメーションを適用したりすることができます。
チェーン呼び出しも非常に直感的です。
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(2500)
.typeString('シンプルでありながら強力なネイティブJavaScript')
.pauseFor(300)
.deleteChars(10)
.typeString('<strong>JS</strong> プラグインでクールなタイピング効果を実現し、')
.typeString('<strong>わずか <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
.pauseFor(1000)
.start();
このようなシンプルなタイピング効果に満足できない場合、テキストをもっと多様に楽しみたいのであれば、gsapを使用する必要があります。これは基本的に世界で最も強力なアニメーションライブラリです。
提供されているsplitText機能を使用することで、文字の分割アニメーションをより細かく制御でき、タイピングアニメーションに限られません。