- 説明
-
各セクションの data-bg / data-fg を、ScrollTrigger の scrub
でラッパー要素の背景色・文字色として補間する。セクション自体の静的な背景色は
JS 側で透明化し、reduce 時(アニメーション無効時)はその静的配色がそのまま最終状態になる。
- 元ref
-
ref-001 Farm Minerals(LP/references/ref-001-farm-minerals.md の演出パターン4)
- 案件への移植メモ
-
demos/bg-color-shift/main.ts の [data-color-shift] / [data-color-section]
ブロックを、案件の src/animations/<パターン名>.ts に init 関数として切り出し、
src/animations/index.ts に登録する。セクション側の静的配色(style属性)も一緒に移すこと。