chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/08/02

[jQuery]雰囲気アップに!画像にぼかしを付けるjQueryプラグイン「Blurr」

最近画像にぼかしを入れたキーヴィジュアルなどをよく見かけます。Photoshopなどで、画像自体をぼかし加工するというのが多いと思いますが、差し替えなどが多かったりするケースもあると思います。そういったケースの場合にオススメなのが、プラグイン「Blurr」
対応ブラウザはIE8/9(部分的サポート)/IE10+/FF/Chrome/Opera/Safari

Blurr

今回は画像にぼかしを付けるjQueryプラグイン「Blurr」をご紹介致します。

対応ブラウザは以下となっております。

  • IE8/9 (部分的サポート)
  • IE10+
  • Firefox
  • Chrome
  • Safari
  • Opera

ダウンロードはこちら

デモはこちら

 

使用方法

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.blurr.js"></script>

<!-- js -->
$('.blur-this').blurr({
   height: 300, //ブラーをかける高さ
   sharpness: 40, //ブラーの強さ(0-100までの指定)
   offsetX: 0, //ブラーのかける位置(X座標左右)
   offsetY: 0, //ブラーをかける位置(Y座標上下)
});

<!-- ブラーをかけるdiv -->
<div class="blur-this" data-href="画像のパス">
  <div>テキストを追加する場合は中に入れ子として置きます</div>
</div>

 

いかがだったでしょうか。

サーバーサイドやPhotoshopで加工するよりも簡単にぼかしを掛けれるので作業としては、楽にはなるのではないでしょうか

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加