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

サイト構築 -JavaScript

Post on:2012年8月9日

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