多層レイヤーとCSS Maskによる視覚的フォーカスの制御実装

Layout

実装ポイント Focus: 下記のように画面を3つのレイヤーに分解し構築しました。
Layer 1 (背景)は操作可能なスライダー層。grayscale と brightness で彩度を落とし、あくまで背景として配置しています。
Layer 2 (フィルター)部分はbackdrop-filter: blur を適用したドーナツ型の層。これにより、背景と前景の間に物理的な「レンズの厚み」のようなボケを作り出しました。
Layer 3 (前景)については、mask-image で中央のみをくり抜いたフルカラー層。ここだけを「実際の視界」として見せることで、コントラストによる鮮明さを生み出しています。
挑戦 Challenge: 最大の課題は、backdrop-filter が「その要素の背後すべて」をぼかしてしまうため、単純な重ね順では意図した描画にならない点でした。
背景と前景のスライダーを物理的に別DOMとして分離し、その中間にBlur層を挟む設計で解決しました。
使用技術 Animation: ・HTML5 (Multi-layer Architecture)
・SCSS (Mask-image, Backdrop-filter, Filter)
・Swiper.js
・JavaScript
詳細 Details: #css-mask #swiper