• RSS

[JS]特定の要素にブラー効果(ぼかし)を与えるjQueryプラグイン「Foggy」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、

特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグイン「Foggy」のご紹介です。

Foggy のダウンロード

以下のページより、Foggy のファイルをダウンロードします。


Foggy の設置方法

<head> タグ内に、jquery ファイルと一緒にjquery.foggy.min.js ファイルを設置します。
<script src="./jquery.min.js"></script>
<script src="./jquery.foggy.min.js"></script>
<script>
 $(document).ready(function(){
	$('.blur').foggy({
   blurRadius: 5,
   opacity: 0.5,
   cssFilterSupport: true
 });
});
</script>
上記例では、blur というクラス名の要素に対してブラー(ぼかし)効果を与えます。

オプションのblurRadiusは「ぼかしの強さ」です。値が大きいほどぼかしがきつくになります。

opacityは「透明度」です。値が大きいほどはっきり表示されるようになります。


CSS で背景画像を指定したDIV 要素をぼかす

例として、background-image で背景画像を指定したDIV 要素にブラー(ぼかし)効果を与えてみました。
<style>
.blur	{
	width:640px;
	height:480px;
	background-image:url(./images/foggy01.jpg);
	background-position:50% 0;
	background-repeat:no-repeat;
}
</style>

<div class="blur"></div>

Foggy で背景画像にブラー効果を効かせたデモはこちらです。
Foggyで、特定の要素にブラー効果(ぼかし)を与えるデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください