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. Zoom Slider

    JavaScript

    ズーム機能を備えたシンプルなコンテンツスライダー「Zoom Slider」

    Zoom Sliderは奥行き感を演出したズーム機能を備えたシンプルな…

  2. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  3. Choice.js
  4. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  5. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  6. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP