Blog

CSSのぼかしフィルターを利用した、フォーカスによる遠近表現

2015.01.07Cat:css3 html5 jQuery SVG デザイナー

CSS3のfilterプロパテッィを利用すると、ぼかしの効果を

難しい記述をすることなく簡単に実装することができます。

 

このぼかしを日常で見る機会はというと、

肉眼やカメラである1点にピント(焦点)を合わせたとき、

ピントの合っていないところはぼやけて見えますが、

このピンぼけの状態がぼかしと同じ見え方になると思います。

 

ピントを合わせている対象物の距離を中心に、ピントはどんどんずれてぼかし効果も大きくなっていますの。

そのため、このぼかし効果を利用すれば、遠近の表現ができるのではないかと考えました。

そこで、それをCSS3のfliter効果を利用して作ってみましたので、

ご紹介いたします。

 

↓こちらが作ってみたもの(Chrome, FireFox, Safari, Operaで動作します)

DEMO

 

概要と方法

概要

  • 今回作るものは、仮想の焦点位置を設定した画像をいくつか配置し、
    その焦点位置を基準にぼかし効果の強さを変更します。
  • 焦点の合っている位置を変更できるハンドルを配置し、
    その値を変更すると、焦点の合っている場所が変更され、ぼかし効果が変更されます。
  • 画像をクリックすると、その画像に焦点の合っている位置を変更します。

 

手順

  1. HTMLで画像(<img>)を配置して、仮想の焦点位置をdata属性として設定する
  2. 焦点の合っている位置を変更するハンドルを、
    HTML5のINPUTタグの新しいタイプであるrangeをつかって配置します。
  3. jQueryのcssプロパティを使って、ぼかし効果を変化させる

 

1. HTMLで画像(<img>)を配置して、仮想の焦点位置をdata属性として設定する

HTML上で画像をimgで配置し、そこにdata属性で仮想の焦点位置を設定します。

今回は焦点位置の属性名をdata-focusとして、最も近くの画像を0、最も遠くの画像を100として設定しました。

 

2.焦点の合っている位置を変更するハンドルを、HTML5のINPUTタグの新しいタイプであるrangeをつかって配置

先ほどの画像の下にHTML5で新たに追加されたINPUTタイプの”range”を配置します。

最小値をmin属性、最大値をmax属性、値のステップ値をstep属性で設定します。

今回は値の範囲を0から100までとし、ステップ値は1にしました。

 

jQueryのcssプロパティを使って、ぼかし効果を変化させる

jQueryの大まかな流れとしては、

  1. imgのdata-focusの値を取得
  2. 一番遠いときのぼかしの値(100)を10として、ピントが合っている位置からimgまでの値の差をぼかしの値に変換(10で割って四捨五入)
  3. jQueryのcssプロパティを使って、ブラウザに合わせたぼかし効果を適用
  4. Focusハンドルを操作したり、画像をクリックしたら、ピントが合っている位置を変更して、
    ぼかしを再計算して適用

といった感じになります。

 

ChromeやSafariなどのwebkit系ブラウザでは-webkit-filterプロパティを使い、

それ以外のFireFoxなどではSVG Filterを使うように振り分けています。

IEもチャレンジしてみましたが、今回は時間切れとなってしまったため、対応していません。

 

画像をクリックしたときには、変化している様子がわかりやすいように、

setInterval()を使ってアニメーションさせています(ぼかしの効果は複雑なためブラウザ上での処理が大変で時間がかかるようなので、intervalの時間は0にしています)。

 

 

遠近を表現するだけでなく、注目させたいところを強調したりするのにも使えるのではないかと思います。

 

 

参考にさせていただいたサイト

CSS と SVG で曇りガラスのような効果を作る | Unformed Building

 

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ