なんとなく作ったJavaScriptライブラリ（プラグイン）を紹介させていただきます。最近はヒーローイメージによる全画面レイアウトなどが流行っていますが、そうした全画面の要素に対して、テキストを単に表示させるのではなく、タイプライターやテキストエディタのようにテキストを1文字ずつ順番に表示させるようにしたら面白いなと思って作ったJSライブラリとなります。興味をお持ちいただいたら、ぜひ使ってみてください。
目次
「cb-typewriter-js」概要
「cb-typewriter.js」は、タイプライターで打っているかのように、任意のテキストを１文字ずつ順番にある一定の間隔でブラウザ上に表示させていく機能を実装するためのJavaScriptライブラリです。
以下のような特徴があります。
- jQueryなど他のライブラリなどに依存しない
- 任意の位置に改行を入れられる
- オプションで、テキストを表示させるスピードを自由に設定できる
- テキストを表示させた後に実行させるコールバック関数を設定できる
「cb-typewriter-js」デモ
「cb-typewriter-js」を使ってどのようなものが実装できるか、まずはデモをご覧ください。
「cb-typewriter-js」のダウンロード
「cb-typewriter-js」の入手先はGitHubのページからとなります。
[git clone]コマンドでローカルにコピーしてもよいです。
$ git clone git@github.com:maechabin/cb-typewriter-js.git 任意のディレクトリ名npm経由でも入手可能です。
$ npm install --save cbtypewriter使用するファイルは以下のjsファイルとなります。
./dist/cb-typewriter.min.js
「cb-typewriter-js」の実装方法
1. ライブラリの読み込み
distディレクトリ内の「cb-typewriter.min.js」をページに読み込みます。
<script src="./dist/cb-typewriter.min.js"></script>ES6（ES2015）のimportやrequire()関数で読み込むことも可能です。
import TypeWriter from 'cbtypewriter';var TypeWriter = require('cbtypewriter');2. テキストを表示させる要素を準備
class属性の値をcb-typewriterとして、テキストを表示させる要素を作成します。（class属性の値はオプションで任意の値に変更することも可能です。）
<div class="cb-typewriter"></div>3. 表示させるテキストを設定
<body>の閉じタグの直前に以下を挿入。TypeWriterオブジェクトの引数に表示させたいテキストを配列としてセットして、インスタンスを作成します。
var typewriter = new TypeWriter(['Hello', 'World']);TypeWriterオブジェクトの引数には表示させたいテキストを配列に格納してセットします。配列の要素ごとに改行が入るようになっています。
TypeWriter(Array)
4. ライブラリを実行
作成したインスタンスに対して、init()メソッドを実行。init()メソッドの引数に、オプションを指定します。
typewriter.init();「cb-typewriter-js」のオプション
「cb-typewriter-js」のオプションは以下の通りです。オプションはinit()メソッドの引数に、 オブジェクトリテラル形式で指定します。
- selector {String}
- 表示させるテキストの要素のセレクタ名を指定します。任意のセレクタ名を持った要素に対して、ライブラリを実行したい時に使うオプションです。`.selector`、`#selector`などcssで使用するセレクタ名で指定します。デフォルト値は`.cb-typewriter`。
- interval {Number (Integer)}
- テキストの表示速度を指定します。数字で指定。単位はms（ミリ秒: 1/1000秒）となります。デフォルト値は`500`。
- callback {Function}
- テキストが完全に表示された後に実行させるコールバック関数を指定します。デフォルト値は`null`。
オプションの設定方法などは、以下の実装例を参考にしてください。
「cb-typewriter-js」の実装例
‘Hello World’を1行で表示させる場合
最も単純な基本スタイルです。TypeWriterオブジェクトの引数に表示させたいテキストを1つの要素の配列としてセットします。
var typewriter = new TypeWriter(['Hello World']);
typewrite.init();‘Hello’と’World’を改行して表示させる場合
任意の場所で、改行を入れたい場合もあります。その場合は、TypeWriterオブジェクトの引数に表示させたいテキストを、行ごとに複数の要素に分けた配列としてセットします。
var typewriter = new TypeWriter(['Hello', 'World']);
typewrite.init();セレクター名を’.sample’に、テキストを表示させる間隔を’100ms’にして、’Hello World’を表示させる場合
オプションによって、任意のセレクターや任意の表示速度を設定することができます。.init()メソッドの引数に以下のようにオブジェクトリテラク形式でセットします。
var typewriter = new TypeWriter(['Hello', 'World']);
typewrite.init({
selector: '.sample',
interval: 100
});‘Hello World’のテキストの表示が終わった後に、コールバック関数を実行させる場合
オプションによって、テキストの表示が終わった後に、実行されるコールバック関数を設定することができます。.init()メソッドの引数に以下のようにオブジェクトリテラク形式でコールバック関数をセットします。
var typewriter = new TypeWriter(['Hello', 'World']);
typewrite.init({
callback: function () {
alert('Hello World');
}
});補足
TypeWriter([‘Hello’, ‘World’])で吐き出されるDOMは以下の通りです。1文字ずつcb-twとclass名のついたspan要素でマークアップされています。以下の構成を頭に入れておけば、1文字ずつアニメーションなどのエフェクトをかけたり、1文字ずつ異なった装飾をしたりすることも可能です。
<div class="cb-typewriter">
<div>
<span class="cb-tw">H</span>
<span class="cb-tw">e</span>
<span class="cb-tw">l</span>
<span class="cb-tw">l</span>
<span class="cb-tw">o</span>
</div>
<div>
<span class="cb-tw">W</span>
<span class="cb-tw">o</span>
<span class="cb-tw">r</span>
<span class="cb-tw">l</span>
<span class="cb-tw">d</span>
</div>
</div>まとめ
今年（2016年）はアニメーションなど動きを伴ったサイトやUIが、より身近なものになってくると予想しています。テキストも同様に、単に表示させるのではなく、1文字ずつアニメーションなどのエフェクトをかけたり、1文字ずつ異なった装飾をしたりして表示させるような実装を求められる機会も増えていくと思っています。似たようなライブラリはすでにたくさん出回っていますが、こちらのライブラリに興味をお持ちいただきましたら、ぜひ使っていただけると幸いです。
ぜひお使いいただき、何かご意見、ご要望などあればお知らせいただけると幸いです。
コメント