文字がシャッフルされながらパラパラと表示されるBaffle.js

2016年に作られたJSライブラリで古いですが、デジタルな表現で使えそうなので試してみました。

baffle.js

baffle.js a tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.

サンプル

簡単なサンプルを作成しました。

See the Pen Untitled by hakoirioyaji (@hakoirioyaji) on CodePen.

重要な関数はreveal() で、実行すると元の文字に戻ります。
引数にmsで数字を入れるとその値で停止してくれるので制御しやすいです。

使い方

サンプルのソースコードを見てもらうのが早いですが、特に難しいところはなく数行で作成できます。

HTML

要素にテキストを記述します。

<p id="test">これはサンプルのテキストです!</p>

JS

実行方法は3つあり、CSSセレクターや要素を取得して設定します。

// CSSセレクター
baffle('#test').start();

// Node
baffle(document.getElementById('#test')).start();

// Node List
baffle(document.querySelectorAll('p')).start();

オプションは3つだけです。

characters

シャッフルされる文字を文字列か配列で設定します。
デフォルトは英数字記号です。
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}|;:,./<>?

speed

シャッフルスピードをmsで設定します。
デフォルトは50です。

exclude

シャッフル時に除外する文字を設定できます。
デフォルトは' ' (半角スペース)です。

baffle('#test').start({
  characters: 'abcdefghijklmnopqrstuvwxyz',
  speed: 75
});

殆どの場合、charactersとspeedオプションしか使用しないと思います。

使ってみた感想

使いどころは難しいですが、パッと思いつくのは以下2つぐらいです。

1. マウスオンで表示が切り替わる
2. 画面内に入ったら元の文字に戻す

試してはないですが、Bの場合で大量に実行させると動作が重くなる可能性はあると思います。
安定させる場合は画面外ギリギリでstart()して、画面内に入ったらreveal(1000) を実行させれば良いかと思います。

ちょっとしたアクセントに使用してみてはどうでしょうか。