はじめに
皆さんは、codepenのChallengesを知っていますか？
毎月html,css,javascriptのお題がcode penから出されて、それを実装するというcode penが実施しているイベント（？）です。
今日はこの五月のチャレンジ「フィルター」をテーマにして、カメラの「被写界深度」を再現してみたので紹介します。
被写界深度とは？
被写界深度とは、カメラのピントが合う範囲のことです。カメラをよく知っている人ならF値によって設定されるものですね。下の図のようなイメージで被写界深度を上げる（f値をあげる）とピントの合う範囲が広がりより多くの被写体に対してピントを合わせることができます。
あげすぎると、なんかのっぺりとした見た目になって没入感がなくなってしまうので程よくかけると映像などには深みが出ますよね。
今回はこの被写界深度をCSSとjavascriptでなんちゃって被写界深度として再現してみました。
できたもの
See the Pen [filter]depth of field by 苅田ハユセ (@dtweqbgd-the-vuer) on CodePen.
今回はオブジェクトをランダムで配置し、そのZの値によってマウスフォーカスされたもの以外のオブジェクトに「ぼかしフィルター」をつけました。
ボカシの強度は、([ホバーしたアイテムのZの値] - [その他のアイテムのZの値]の絶対値) * ボカシの強さ
で出しています。
結構実装楽しかったです！！