BLOG ブログ

> ブログ

jQuery WEBデザイン

2020.05.20

【jQuery】超簡単！『typist.js』タイプライター風にテキストを1文字ずつ表示する方法

お洒落風に文字を表示したい時ありませんか？
そんなときに使えるプラグインがあります！

『typist.js』

こちらタイプライター風にテキストが１文字ずつ表示されます。

こんな感じでタイプライター風に文字が出てきます。
設定は3STEPで超簡単です！

STEP1：外部ファイルを読み込む

<script src="https://unpkg.com/ityped@1.0.3"></script>

1	<script src="https://unpkg.com/ityped@1.0.3"></script>

STEP２：HTMLに要素を追加する

<span id="typist"></span>

1	<span id="typist"></span>

STEP3：JavaScriptを追加する

<script>
ityped.init('#typist', {
  strings: ['タイピスト', '簡単だよ！'],
  typeSpeed: 100,
  backSpeed:  100,
  startDelay: 300,
  backDelay:  1000,
  loop: true,
  showCursor: true,
});
</script>

ityped.init('#typist', {

strings: ['タイピスト', '簡単だよ！'],

typeSpeed: 100,

backSpeed: 100,

startDelay: 300,

backDelay: 1000,

loop: true,

showCursor: true,

});

</script>

オプション

strings	入力文字列を指定、[,]で複数指定で順番に表示
typespeed	入力速度（数字が小さいほど早くなります）
backspeed	消去速度（数字が小さいほど早くなります）
strartdelay	指定ミリ秒待ってから入力（数字が小さいほど早くなります）
backdelay	指定ミリ秒待ってから消去（数字が小さいほど早くなります）
loop	ループ（’true’ or ‘false’）
showCursor	入力文字のすぐ後ろにカーソルを表示