CSS z-index ベースの被写界深度ライブラリ。焦点距離・絞り・センサーサイズというカメラパラメータでブラー・スケール・透明度を制御します。
Features
カメラの物理パラメータをそのままWebのUIに。センサーサイズ・焦点距離・絞りで、本物の被写界深度をCSSで再現します。
センサーサイズ（フルサイズ〜スマートフォン）・焦点距離・絞り値の組み合わせで、リアルな被写界深度を表現します。
フォーカス移動はrequestAnimationFrameとイージングで滑らかにアニメーション。パフォーマンスに配慮した設計です。
watch: true でdata-z属性の変化を自動検知。GSAPやScrollTriggerとの連携がシンプルに実現できます。
1ページ内に複数のシーンを独立して配置できます。それぞれ異なるカメラ設定で動作します。
GSAPのScrollTriggerやMotionLabのZ軸アニメーションと組み合わせることで、インタラクティブな奥行き表現が可能です。
外部ライブラリへの依存なし。CDN / npm / ESM のすべての形式で配布しています。MITライセンスで商用利用可能。
Integration
DepthFieldは単体でも使えますが、GSAPやMotionLabと組み合わせることで、インタラクティブな奥行き表現が可能になります。
スクロール量に連動してフォーカスポイントを移動させます。watch: true と ScrollTrigger の scrub を組み合わせるだけで、このページのヒーローデモのような表現が実現できます。
GSAPアニメーションをGUIで設計できるツール「MotionLab」は、Z軸アニメーションがDepthFieldと直接連動します。1行のscriptタグを追加するだけで、既存のページ上でGSAPアニメーションをリアルタイムにシミュレーションできます。
Interactive Demo
センサー・焦点距離・絞りをスライダーで調整。要素をクリックするとフォーカスが移動します。
最も奥の要素
奥の要素
フォーカス基準
手前の要素
最も手前の要素
ここがフォーカスの中心。最も鮮明に表示される。
補足的なコンテンツ。
補助的な情報。
参考情報。
手前に出て目立つ要素。
重要な告知。
Installation
API Reference
| オプション | 型 | デフォルト | 説明 |
|---|---|---|---|
sensor | string | 'fullframe' | センサーサイズプリセット。fullframe / apsc / mft / smartphone など10種類。 |
focalLength | number | 50 | 焦点距離（mm）。値が大きいほど被写界深度が浅くなります。 |
aperture | number | 1.8 | 絞り値（F値）。小さいほど背景がよくボケます。 |
focusPoint | number | 0 | ピントを合わせるz-index値。この値に最も近い要素が鮮明になります。 |
depthScale | number | センサー依存 | 奥行きのスケール係数。大きいほど遠近感が強くなります。 |
maxBlur | number | センサー依存 | ぼかしの最大値（px）。 |
transition | number | 0 | CSS transitionの秒数。smooth: 0.3 などで滑らかさを追加できます。 |
watch | boolean | false | true にするとdata-z属性の変化をMutationObserverで自動監視します。GSAP連携時に便利。 |
| メソッド | 説明 |
|---|---|
df.apply() | 現在の設定でエフェクトを適用します。 |
df.focus(z, duration) | フォーカスポイントをアニメーションで移動します。durationはms単位（省略時は即時）。 |
df.update(options) | オプションを変更して再適用します。 |
df.reset() | エフェクトをリセットします。 |
| 属性 | 説明 |
|---|---|
data-z="0" | 要素のZ位置を指定します。focusPointからの距離でブラー・スケール・透明度が決まります。 |
data-df-group="id" | 同じidを持つ要素をグループ化し、同じエフェクトを適用します。写真とキャプションの連動などに使います。 |
Resources