baffle.js

JavaScript

DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さらにそれを読めるように明らかにするjsライブラリです。これらの動きはアニメーション化され表現されます。ファイルは~1.8KBと軽量です。このライブラリは依存性がないので、単体で使用することができます。少し楽しみながら使用できるライブラリです。さっそくbaffle.jsの詳細を見ていきましょう。

baffle.js

デモ

使い方ですが、まず下記のようにjsファイルを読み込みます。

<script src="baffle.min.js"></script>

そして、難読化させたいテキストを含む要素に「baffle」を呼び出します。また、オプションも指定できるので、同様に「baffle」を呼び出します。

  • a.once(); ・・・各要素を難読化。
  • a.start(); ・・・難読化、アニメーションを開始。
  • a.stop(); ・・・アニメーションを停止。(テキストは明らかになりません。更新だけを停止します。)
  • a.reveal(); ・・・テキストを明らかにする。
  • options.characters(); ・・・テキストを難読化するために使用するバッフル文字。そのまま文字列や文字の配列を使用可能。
  • options.speed(); ・・・更新をミリ秒単位で指定。
  • options.speed(); ・・・実行の際、「baffle」がテキストを更新する時のスピードをミリ秒単位で指定。

baffle.js

夜空に大輪の花を咲かす!Illustratorで花火の作り方前のページ

製品などの比較に役立つjQueryプラグイン「Product comparison」次のページProduct comparison

最近の記事

  1. ボヤージュブレンド
  2. 紫陽花とセミの抜けがら
  3. クラブハウスサンド 石窯カンパーニュ
PAGE TOP