スクロール · スクロールで変わる
ピン留めスクロール钉住滚动
- ページが止まる
- 中が進む
- スクロールが時間軸になる
セクション全体が画面に留まったまま、スクロールは続きます。進むのはセクションの中身です。映像が再生され、行が順に点灯し、画像が少しずつ分解されます。「どれだけ下へスクロールしたか」を「この時間軸のどこか」に置き換えます。手は動き続けますが、構図は同じ場所に留まります。
使いどころ
「何かを説明する」長いページに使います（製品の仕組み、年表、手順）。一回の実演に 1.5〜2 画面分のスクロール距離を使うので、1 ページに最大二箇所です。日常的な機能ページには使わないでください。探しているものが固定されていると、ページが固まったように感じます。
パラメータ
position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
レシピ
ピン留めスクロール → position: sticky · top 0 · scroll range 1.6× viewport height · inner progress 0→1 · linear, no easing
AI に渡す一文
ピン留めするセクションを作ってください。外側のコンテナの高さをビューポートの 1.6 倍にし、内側の層を position: sticky; top: 0 で固定します。外側がどれだけスクロールされたかを読み、0→1 の進捗に写像し、その進捗で内側の時間軸を進めます（映像の再生、行の点灯、画像の分解）。写像は線形にし、イージングを掛けないでください。手が動いた分だけ中身が動くべきで、イージングは指から切り離します。