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

関連記事

  1. FModal.JS

    JavaScript

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

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

  2. Simple Sidebar
  3. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  4. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  5. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

最近の記事

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

Facebookページ

PAGE TOP