背景色シフト
スクロールでセクションに入るたび背景色が滑らかに切り替わる。物語性のあるLPに。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 章ごとに場面が変わる物語性のある LP
- セクションの切り替わりを全画面で示す
- 3〜5 セクションの縦長ページ
- 避ける場面
- 本文が多く背景色で可読性が変わるページ
- セクションが短く色が頻繁に変わる構成
- 構成要素
- セクション
- 背景（body）
- セクション見出し文
- 持っている状態
- 通常
- キーボード
スクロール（キーボードは ↑↓/PageDown で可）。操作要素は無い
- 支援技術
情報は文字で伝わり背景色は補助。白文字と各背景色の対比を確保する。半分見えた時点で切り替わる。reduced-motion では色を即時に切り替える
- 動き
背景色 600ms ease。セクションが半分見えた時点で切り替わり、場面転換を示す
デザインの要点
- 色は section でなく body に付ける。section ごとに塗ると境界が線で割れ、「場面が変わる」でなく「箱が並ぶ」に見える
- threshold 0.5（半分見えたら）。0 だと次の色が早すぎて今の章を読んでいる最中に変わる
- 600ms のクロスフェード。速いと点滅に、1 秒を超えると前の章の色を引きずって今どこにいるか曖昧になる
- 色は data-bg で section に持たせる。JS に色表を持つと章の追加で 2 箇所を直すことになる
コード（コピーして使えます）
<div class="bg-shift">
<section data-bg="#2b50c7">スクロールすると</section>
<section data-bg="#2e9e6b">背景色が</section>
<section data-bg="#c0492f">滑らかに変わる</section>
</div>