webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

背景画像を今風にぼかす軽量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'
});

f:id:tkosuga:20150705001953p:plain


サイトはこちらからご確認ください。

http://msurguy.github.io/background-blur/

背景画像をフェードしながらスイッチができます。本人アイコンやアバターアイコンをぼかして背景に使うと背景画像がメイン画像にとても良くなじみます。

f:id:tkosuga:20150705002337p:plain

jQueryPluginで同じくぼかし(Blur)ができるBlurrも紹介します。

jQuery Blurr Example Page

使い方に興味を持った方はGitHubの説明をご確認ください。

tomhallam/Blurr · GitHub

小さめの画像でもぼかすと粗さが見えなくなるので、ページ横幅いっぱいに表示できるほど解像度の高くない画像を背景に使って画面全体に広がる印象を与えたい場合に便利ですね。