画像にぼかしを入れるjQueryプラグイン「Background Blur」
2016年4月14日
Photoshopで画像をぼかした状態に加工するのは難しくありませんが、JavaScriptとCSSでぼかし加工をすることができれば、アニメーションを付けたり、ぼかしの微調整をソースコード上で行うことができて便利です。
今日は、背景画像にぼかし加工をかけることができるjQueryを紹介している「Background Blur」のサイトをご紹介します。
Background Blur の使い方
まずは、必要なファイル一式をダウンロードする必要があります。
GitHubのbackground-blurのページからファイルをダウンロードしましょう。
jQueryを適用したいHTMLファイルに、下記の
ぼかしを適用したい背景画像が入るボックス（
タグなど）に、下記のようにid属性を設定します。（id属性の値は任意でOK！）
そして、JavaScriptファイルに下記を追記します。
$(function(){
$('#id名').backgroundBlur({
imageURL : 'ぼかしをかける画像のパス',
blurAmount : 50, //ブラー処理
imageClass : 'bg-blur'
});
});
公式サイトの方では、フェードイン効果などをつける属性も記載がありますので確認していろいろとカスタマイズして作品制作にお役立てくださいね。
関連サイト
関連ブログ記事
- 「HTML5.1は2016年9月に勧告？」written by 山田宏樹
- 「jQuery プラグインをまとめて検索」written by 山田宏樹
本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。
