
画像や要素をぼかすことができる「Vague.js」
2014年11月19日jQueryプラグイン活用
今回は分かりやすく画像をぼかしましたが、画像のみならずデバイスフォントを含めた要素もぼかすことが可能です。
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; }