jQueryやCSS3を使って画面の一部をぼかす方法を考える

SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。

しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。

SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。

↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。

方法
今回は、body内の要素を丸々コピーして要素の上に被せ、

被せた要素にfilterをかけてcssのclipで一部だけ表示するという方法を使いました。

HTML

HTML
XHTML

<body> <div class="contents"> ： (コンテンツ) ： </div> </body>

1
2
3
4
5
6
7

<body>
<div class="contents">
：
(コンテンツ)
：
</div>
</body>

JavaScript

JavaScript
JavaScript

$(function(){ //body内のコンテンツをコピーしてコンテンツの後ろに挿入する $("body").append($(".contents").clone()); $(".contents:last").css({ "width" : "100%", "position" : "absolute", "top" : "0", "left" : "0", "-webkit-filter" : "blur(10px)", //ぼかしをかける "clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する }); });

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){
//body内のコンテンツをコピーしてコンテンツの後ろに挿入する
$("body").append($(".contents").clone());

$(".contents:last").css({
"width" : "100%",
"position" : "absolute",
"top" : "0",
"left" : "0",
"-webkit-filter" : "blur(10px)", //ぼかしをかける
"clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する
});
});

今回作ったものは、現在のところChrome, Safariだけで使える方法なので、

実用にはまだまだ遠いですが、SVGを使った方法（参考→「CSS と SVG で曇りガラスのような効果を作る」）と合わせ、

効果の出し分けをするなどすれば、少しでも実用化に近づけることができるかもしれません。

いずれにしても、Android2.3系でもぼかし効果を使うことはあきらめなければならなそうです。
Android2.3系は、Androidの中でも2014年2月時点でも2割のシェアがあり（参考）、無視することもできないため、

もしぼかし効果を使う場合は、Android2.3系において、ぼかし無しで問題無いようなデザインにしておく必要がありそうです。

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。