§16-02Motion

Parallax

背景と前景をずらして動かし奥行きを出す。

スクロールに合わせて要素を異なる速さで動かし、画面に奥行きを演出する。ランディングページや紹介ページで印象を強めたいときに使う。

実装のポイント

移動量は transform: translateY だけで表現し、top や margin を動かしてレイアウトを再計算させない。動きが大きいので prefers-reduced-motion 時は係数を 0 にする。