【t.js】タイピング風アニメーションで文字を表示する
タイピング風のアニメーションが簡単に作れる、t.jsというライブラリをご紹介します。
最後には、ライブラリを使わずにJavaScriptで作ったコードも載せていますので、ぜひご覧ください。
t.js の読み込み
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- t.js -->
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>jQueryとt.jsを読み込みます。
t.jsはGitHubでダウンロードしたものを読み込んでもOKです。
HTML & CSS & JavaScript コード例
<div class="typing">Hello World.</div>/* フォントサイズ */
.typing {
font-size:30px;
}
/* カーソルの色 */
.t-caret {
color: red;
}
/* ミスタイプや文字消去の際の打ち消し線を非表示にする*/
del {
text-decoration: none;
}$(function(){
$('.typing').t({
delay: 0.5, // アニメーション開始までの時間
speed: 50, // アニメーション速度
speed_vary: false, // スピードに緩急をつけるか
beep: false, // タイピング音の有無
mistype: false, // ミスタイプの有無
locale: 'en',
caret: true, // カーソルの有無
blink: true, // カーソル点滅の有無
blink_perm: false, // タイピング中のカーソルの点滅
repeat: true, // 繰り返し回数（true = 無限）
tag: 'span',
pause_on_click: true, // クリックにで一時停止させるか
init: function(elm){},
typing: function(elm,chr_or_elm,left,total){},
fin: function(elm){}
});
});いろいろな変化をつける
デフォルトの状態
<div class="typing">Hello World.</div>スピードを変える
<div class="typing">Hello <s>300</s>World.</div><s></s>内に数値を入れると、その後の文章の表示スピードが変わります。
一旦停止させる
<div class="typing">Hello<ins>2</ins> World.</div><ins></ins>内に数値を入れると、その秒数だけストップします。
ミスタイプを発生させる
<div class="typing"><kbd>Hello World.</kbd></div><kbd></kbd>内に入れた文字列にミスタイプが発生します。（発生しないときもあります）
文字列を消去する
<div class="typing"><del>ハロー</del>Hello World.</div><del></del>内に入れた文字列は、一旦出力されたあと消去されます。
jQuery無しで作ってみました
出来栄え
Hello!こんにちは。
タイピング風アニメーションt.jsを気に入って使っていたのですが、どうしてもjQueryを使わずに作ってみたくなりました。
ご紹介したライブラリのように融通はききませんが、何とか形にはなりました。
アニメーションは1回切りなので、ページを更新して見てください。
コード例
<p><span id="js-typing01">Hello!</span><span id="js-typing02">こんにちは。</span></p>CSSは省略していますが、文字が全部消えた時に高さが0になってしまってコンテンツがズレるので、高さを指定するとか、上下中央寄せに配置するとか、うまく調節してください。
あと、一瞬文字が見えてしまうと思うので、使う場所によっては最初opacityを0にして時間差で発動するようにした方がいいかもしれません。
let typingText01 = document.getElementById('js-typing01');
let typingText02 = document.getElementById('js-typing02');
let typingArray01 = [...typingText01.textContent]; // ['H', 'e', 'l', 'l', 'o', '!']
let typingArray02 = [...typingText02.textContent]; // ['こ', 'ん', 'に', 'ち', 'は', '。']
typingText01.textContent = '';
typingText02.textContent = '';
function typing01() {
// ['H', 'e', 'l', 'l', 'o', '!']の各文字に対して以下の処理
typingArray01.forEach((character, index) => {
// 0.1秒後に1文字追加して表示
setTimeout(() => {
typingText01.textContent += character;
// 文字を出力し終わった時
if(typingArray01.length === index + 1) {
// 0.2秒後にこの中の処理を1回行う
setTimeout(() => {
// 1文字ずつ消していく処理
let i = 0;
const deleteWord = function() {
typingText01.textContent = typingText01.textContent.slice( 0, -1 );
if( i > index - 1 ) {
// 文字をすべて消したら処理を止める
clearInterval(id);
// 0.8秒後にtyping02関数を発動
setTimeout(() => {
typing02();
}, 800);
}
i++;
}
let id = setInterval(deleteWord, 100);
}, 200);
}
}, 100 * index);
});
}
typing01();
// 「こんにちは。」を1文字ずつ表示する関数
function typing02() {
typingArray02.forEach((character, index) => {
setTimeout(() => {
typingText02.textContent += character;
}, 100 * index);
});
}ものすごいわかりにくいコードになってしまいました。
2つの文字列「Hello!」と「こんにちは。」を、別々の関数で動かしています。
簡単に、流れだけ書き留めておきます。
- 文字列をそれぞれ1文字ずつにして配列に格納し、テキストは一旦非表示にしておく。
- 「Hello!」を1文字ずつ出力。
- 出力が終わったら、0.2秒後に次の処理を行う。
- 出力した文字を1つずつ消していく。
- 全て消し終わったら処理を止め、続いて「こんにちは。」の処理に移る。
- 「Hello!」と同様、文字を1文字ずつ出力。
ざっくりと書くとこんな感じです。
もっと他にやり方があるのかもしれませんが、とりあえず、今の私にはこれが精一杯です。
まとめ
いかがでしたか？
タイピング風のアニメーション、おもしろいですよね。
自分でコードを書いてみて、t.jsのありがたさが身に染みました。
ライブラリの導入は簡単なのでぜひ取り入れてみてください。
最後までご覧いただきありがとうございました。
★参考にさせていただいたサイト
