blurify

JavaScript

画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

blurifyは画像にぼかし効果を実装することができるJSライブラリです。とても軽量(〜2KB)なライブラリなので、PCではもちろん、スマホやタブレットでもサクサク動作させたい人にはピッタリですね。

blurify

デモ

デモではフルスクリーンで表示された画像に、しっかりとぼかし効果がかかっています。実装方法もシンプルだし、ファイル容量も軽量なところがいいですね。

オプションは全部で、images、blur、modeの3つが用意されています。imagesにはぼかし効果をつけたい要素を指定します。blurはぼかし具合を数値で指定します。デフォルトは6です。

また、modeは3種類の中から選ぶことができます。具体的には、css、canvas、autoの3種類です。デフォルトはcssになっています。

軽量ながらもオプションによる手軽なカスタマイズも可能なので、画像にぼかし効果を加えたい人は、覚えておきたいライブラリといえそうです。

いちいち画像加工ソフトを使ってぼかしを入れるのは、何気にめんどくさいですからね。1枚だけならそれほど労力もかかりませんが、たくさん数が増えていくほど手間もかかってしまうので、そういう時にこの「blurify」を活用すると効率的だと思います。

blurify

jQuery Bar Rating選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」前のページ

フルスクリーンによるダイアログボックスを表示できる「jquery.confirmDialog」次のページjquery.confirmDialog

関連記事

  1. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  2. NO IMAGE
  3. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  4. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  5. Responsive Sidebar Navigation
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP