水深による色彩変化と、多層パララックスによる「浮遊感」の演出

Visual / Effects

実装ポイント Focus: 画面を「近景（泡）」「中景（コンテンツ）」「遠景（背景）」の3層に分解し、それぞれに異なるスクロール係数（data-speed）を与えました。
スクロール量に対して -1.7 〜 0.2 の係数を掛け合わせることで、手前の物は速く奥の物は遅く動かすことでリアル感を追求しています。
また背景色を徐々に暗くし、表層（水色）から深海（濃紺）へのグラデーションを作成。スクロールが進むにつれて「潜っていく」体験を視覚化しました。
挑戦 Challenge: 初期実装では単なる白い円だった「泡」を、よりリアルで没入感のある要素にするため試行錯誤しました。
background を透明にしborder と inset shadow（内側の影）を組み合わせることで、光の屈折を感じさせる「透明な泡」をCSSのみで表現。
JSによる座標移動に対し、CSSで transition と cubic-bezier（イージング）を付加。スクロール操作に対して少し遅れて追従することで、機械的な動きを排除しました。
使用技術 Animation: ・HTML / SCSS (Linear-gradient, Box-shadow inset)
・JavaScript (Scroll Event, Data Attributes)
・CSS Transition (Cubic-bezier)
・Parallax Logic
詳細 Details: #parallax #Transform設計