NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

画像や要素をぼかすことができる「Vague.js」

2014年11月19日jQueryプラグイン活用

要素をぼかすことができる「Vague.js」

今回は分かりやすく画像をぼかしましたが、画像のみならずデバイスフォントを含めた要素もぼかすことが可能です。

デモページ

JavaScript

(function($){
	$(function(){
		$('#photo li').each(function() {
			var vague = $(this).Vague({intensity: 5});
			vague.blur();
		});		
	});	
})(jQuery);	

HTML

<ul id="photo">
	<li><img src="img01.jpg" width="237" height="156" /></li>
	<li><img src="img02.jpg" width="237" height="156" /></li>
	<li><img src="img03.jpg" width="237" height="156" /></li>
</ul>

CSS

#photo {
	text-align: center;
}
#photo li {
	display: inline-block;
	margin: 0 20px;
}

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 画像や要素をぼかすことができる「Vague.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com