デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

背景画像をぼかすことができるjQueryプラグインVague.jsの使い方

·

master

webkitを搭載ブラウザ対応のみでよければ、CSS3のfilterを使う方法もあるが、FirefoxやChromeへの対応を考えた場合はこの方法は使えない。

CSS

filter: blur(10px);

そんな時は、FirefoxやChromeでも可能なのがjQueryプラグインのVague.jsがおススメ。
※ただしIE10とIE11は現時点では未対応。

使い方は簡単

body内に置いたIDに背景画像を指定する。
下記サンプルでは全面に画像を配置しているので指定が多いが
最小限の指定としては、背景画像としてセットしておけばいい。

HTML

<body>
<div id="container"></div>
</body>

CSS

<style>
html, body {
	margin:0;
	height:100%;
	overflow: hidden;
}
#container {
	margin:0;
	position:absolute;
	width:100%;
	height:100%;
	background:url(./images/vague.jpg) no-repeat center center;
	background-size:cover;
}
</style>

Javascriptの読み込み

JAVASCRIPT

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="./js/vague.js"></script>

Vagueの呼び出し方

<script>
var vague = $("#container").Vague({intensity:10});
vague.blur();
</script>

背景画像をセットしたID（container）に対し「ぼかし」を指定する
ぼかしの強度は「intensity:10」として設定可能。
数値が大きくなるほどぼかしが強くなる。

上記Javascriptをbody内に記載すれば機能するが、ページを開いたとき、一瞬ぼかしの無い画像が表示されるのを消したい場合もあるだろう。
そこで「ぼかし」処理が終わるまで背景画像は表示しないように、指定と処理を追加する。

CSS

<style>
html, body {
	margin:0;
	height:100%;
	overflow: hidden;
}
#container {
	margin:0;
	position:absolute;
	width:100%;
	height:100%;
	background:url(./images/vague.jpg) no-repeat center center;
	background-size:cover;
	display:none;
}
</style>

display:none;

を追加し、読み込み時は背景を表示させない

JAVASCRIPT

<script>
var vague = $("#container").Vague({intensity:10});
vague.blur();
document.getElementById('container').style.display = 'block';
</script>

document.getElementById(‘container’).style.display = ‘block’;

を追加し、処理が終わった後に表示させる

サンプルページ

In:

,

Tags:

, ,