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

関連記事

  1. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  2. Block Slide

    JavaScript

    jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」

    Block SlideというjQueryプラグインを使えば印象的なエフ…

  3. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  4. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  5. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  6. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP