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

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

デモのキャプチャ

Typist
Typist -GitHub

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

top of page

©2017 coliss