背景画像を今風にぼかす軽量jQueryPlugin"background-blur"
背景画像をぼかす(Blur)jQueryPluginの"background-blur"の紹介です。
使い方は簡単でjsファイルを読み込んで上書きする要素(id='some-element')を指定するだけです。
<script src="jquery.min.js"></script> <script src="background-blur.min.js"></script> <div id='some-element'></div>
$('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blurAmount : 50, imageClass : 'bg-blur' });
サイトはこちらからご確認ください。
http://msurguy.github.io/background-blur/
背景画像をフェードしながらスイッチができます。本人アイコンやアバターアイコンをぼかして背景に使うと背景画像がメイン画像にとても良くなじみます。
jQueryPluginで同じくぼかし(Blur)ができるBlurrも紹介します。
使い方に興味を持った方はGitHubの説明をご確認ください。
小さめの画像でもぼかすと粗さが見えなくなるので、ページ横幅いっぱいに表示できるほど解像度の高くない画像を背景に使って画面全体に広がる印象を与えたい場合に便利ですね。