baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さらにそれを読めるように明らかにするjsライブラリです。これらの動きはアニメーション化され表現されます。ファイルは～1.8KBと軽量です。このライブラリは依存性がないので、単体で使用することができます。少し楽しみながら使用できるライブラリです。さっそくbaffle.jsの詳細を見ていきましょう。
baffle.js
baffle.jsの実際のデモは以下になります。
使い方ですが、まず下記のようにjsファイルを読み込みます。
<script src="baffle.min.js"></script>
そして、難読化させたいテキストを含む要素に「baffle」を呼び出します。また、オプションも指定できるので、同様に「baffle」を呼び出します。
メソッドは下記のようなものがあります。全部で6つあります。
- a.once(); ・・・各要素を難読化。
- a.start(); ・・・難読化、アニメーションを開始。
- a.stop(); ・・・アニメーションを停止。（テキストは明らかになりません。更新だけを停止します。）
- a.reveal(); ・・・テキストを明らかにする。
オプションもいくつかあり、配布サイトでは3つ紹介されていました。
- options.characters(); ・・・テキストを難読化するために使用するバッフル文字。そのまま文字列や文字の配列を使用可能。
- options.speed(); ・・・更新をミリ秒単位で指定。
- options.speed(); ・・・実行の際、「baffle」がテキストを更新する時のスピードをミリ秒単位で指定。
依存性がなくとても簡単に設置できるbaffle.js。ダウンロードや詳しい使い方は以下からどうぞ。
