背景画像にぼかしをかけられるjQueryプラグン「Image Blur Plugin」!

2016/04/14

こんにちは。
今回は背景画像にぼかしをかけられるjQueryプラグン「Image Blur Plugin」!です。

背景画像にブラーを簡単にかけれる軽量のjQueryプラグンを紹介します。

背景画像にぼかしをかけられるjQueryプラグン「Image Blur Plugin」!

Image Blur Plugin

image-blur-plugin

 

jQueryプラグイン「Image Blur Plugin」をダウンロードしてみよう!

https://github.com/msurguy/background-blur/にアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「Image Blur Plugin」を設置してみよう!

jQuery本体とbackground-blur.min.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
先ほど指定した「some-element」というidを付けます。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。ぼかしを効かした雰囲気のある背景画像を設定してみてはどうでしょうか。
以上で背景画像にぼかしをかけられるjQueryプラグン「Image Blur Plugin」!でした。

Related Post

topへ戻る