[JS]行送りにも対応、テキストを一文字ずつタイプライターのように表示するスクリプト -Typist

日本語にも対応、行送りや一時停止、タイプスピードの緩急も調整できる、テキストを一文字ずつタイプライターのようにアニメーションで表示するjQueryのプラグインを紹介します。

Typist
Typist -GitHub

• Typistのデモ
• Typistの使い方

Typistのデモ

デモはTypistを実際に使用しているサイトです。

デモページ

ターミナルの高さが小さくても、行送りに対応しています。

行送りしてるとこ

Typistの使い方

実装は3ステップです。

Step 1: 外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして記述します。
※スタイルシートは特に必要ありません、デザインはオプションで設定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.typist.js"></script>

Step 2: HTML

テキストを表示するターミナルを配置します、p, div要素などで。

<p id="terminal"></p>

Step 3: JavaScript

jQueryのセレクタでターミナルを指定し、表示するテキストを記述します。

<script type="text/javascript">
$(function() {
	var console = $('#terminal').typist({
		height: 300
	});

	var play = function() {
		console.html('');
		console.typist('prompt')
		.typist('echo','日本語はどうよ')
		.typist('echo','Searching for chartulous');
	};
	play();
});
</script>

オプション

ターミナルのサイズや背景カラー・テキストカラーなどを設定します。

height

容器の高さ

width

容器の幅

backgroundColor

容器の背景カラー

textColor

テキストのカラー

fontFamily

フォント

オプションを使用すると、下記のようになります。

	var console = $('#terminal').typist({
		height: 300,
		width: 680,
		backgroundColor: #fff,
		textColor: #000
	});

API

APIはタイプライターの表示を設定します。

typist(config)

ターミナルの初期化

typist('prompt')

プロンプトラインを加え、カーソルを点滅

typist('type', text)

プロンプトラインで「text」をタイプ

typist('echo', text)

echoコマンドのように「text」をタイプ

typist('wait', millis)

タイプを指定時間中断

typist('speed', fast_or_slow)

タイプのスピードを変更

APIを使用すると、下記のようになります。

	var play = function() {
		console.html('');
		console.typist('prompt')
		.typist('type','日本語はどうよ')
		.typist('wait',2000)
		.typist('speed','fast')
		.typist('echo','');
		console.typist('wait',400)
		.typist('speed','slow')
		.typist('prompt')
		.typist('wait',1000)
		.typist('type','cat data.csv | chartulous');
	};