仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」

公開日:

jQuery

背景画像にぼかし効果をかけることができるjQueryプラグイン「Image Blur Plugin」

 

最近ホームページ内で使用される画像にぼかしをかけて使用しているデザインを見ることがあります。
ぼかし効果を与えることによっておしゃれに見せたりすることができますよね!

 

jQueryのプラグインで「Image Blur Plugin」というものがあるのですが、こちらを導入するとぼかし効果を与えていない画像に簡単にぼかしを入れることができます。

 

jquery_Image_Blur_1

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

 

 

使ってみたので使用方法など簡単に紹介したいと思います。
デモはこんな感じです

 

「Image Blur Plugin」を使用したデモページ

 

実際はぼかしを入れていない画像です。

 

 

 

「Image Blur Plugin」で画像にぼかしを入れる

まずは下記ページより「Image Blur Plugin」をダウンロードします。

 

https://github.com/msurguy/background-blur

 

 

ファイル読込

jQueryとbackground-blur.jsを読み込みます。

 

 

 

HTML

ぼかしを入れたい要素を用意します。

 

 

 

JS

HTMLで指定したIDで下記のように記述します。
オプションは必要なものを設定してみてください。

 

 

 

CSS

ぼかして表示する要素の高さや幅を指定します。
それぞれの環境であわせてみてください。

 

 

これで背景画像にぼかし効果を与えることができます。

 

 

サンプル

「Image Blur Plugin」を使用したデモページ

 

 

 

まとめ

今回はjQueryのプラグイン「Image Blur Plugin」を使用してみました。

 

背景をぼかすだけでちょっとおしゃれに見せることができるかもしれないです!
どのブラウザでも動作するようなのでホームページに取り入れてみてもいいのではないでしょうか?

 

それでは、また!

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00