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. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  2. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  3. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

  5. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  6. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP