スクロール · スクロールで変わる
横スクロール区間横向滚动区段
- 縦に回して横へ進む
- 留められる
- 軸が入れ替わる
下へスクロールしているのに、この区間は横へ動きます。商品カードの列が右から左へ流れ、行き切ってから下へ進みます。区間は画面に留められ、中身だけが横へ進みます。
使いどころ
横並びの商品、年表、ステップ、ポートフォリオに向きます。カードが 2〜3 枚しかない場合は使わないでください。たくさんスクロールしたのに何も見ていない感覚になります。
パラメータ
section height = total strip width · inner position sticky · translateX = −clamp(start, end, scrollY) · linear, tracks scroll 1:1
レシピ
横スクロール区間 → section height = total strip width · inner position sticky · translateX = −clamp(start, end, scrollY) · linear, tracks scroll 1:1
AI に渡す一文
このセクションを横スクロール区間してください。高さを中身の総幅に設定してスクロール距離を作り、中の横並びを position: sticky で留め、縦スクロール量をその区間の範囲に clamp して負の値として translateX に書きます。スクロールに 1:1 で追従させ、イージングはかけません。