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. Slight Submenu
  2. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  3. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  4. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  5. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  6. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP