Blog

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

2014.02.18Cat:css3 jQuery デザイナー

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

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

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

 

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

DEMO

 

方法

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

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

 

HTML

 

JavaScript

 

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

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

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

 

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

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

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ