{ "id": "motion:motion-pin-scrub", "slug": "motion-pin-scrub", "kind": "motion", "title": { "ja": "ピン留め＋スクラブ", "en": "Pin + scrub" }, "aiName": "Pin + scrub", "summary": { "ja": "画面を固定して中身だけ進む", "en": "Pin the screen while only the content advances" }, "number": 18, "group": "pin-nav", "techniques": [ "position-sticky", "scroll-progress" ], "rules": [ { "ja": "固定の箱は 100vh、外の区画は 400vh を保つ（区画の高さを変えると段階の区切りがずれる）", "en": "Keep the sticky box at 100vh inside a 400vh section; changing the section height moves the step boundaries" }, { "ja": "段階は進み具合 p から決め、時間では切り替えない", "en": "Steps are chosen from scroll progress p, never from a timer" }, { "ja": "動きを減らす設定では固定を解除し、完成した 4 段目だけを表示する", "en": "Under prefers-reduced-motion, release the pin and show only the completed fourth step" } ], "reproduction": { "prompt": { "ja": "ピン留め＋スクラブ — Pin + scrub\n\nスクロールに応じて画面を固定し、中身だけを 4 段階で入れ替える演出を作ってください。外側の区画は高さ 400vh とし、その中に position: sticky; top: 0 の 100vh の箱を置きます。区画の上端が画面の上端に来たとき p=0、区画の下端が画面の下端に来たとき p=1 として進み具合 p（0〜1）を求め、floor(p × 4) の段階を表示します。段階の図は同じ位置に重ね、切り替えは 0.7 秒の opacity と translateY(24px) で行い、下部の 4 本の目盛りを現在の段階まで塗ります。GSAP ScrollTrigger なら `pin: true, scrub: true` で同じことができます。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 固定の箱は 100vh、外の区画は 400vh を保つ（区画の高さを変えると段階の区切りがずれる）\n- 段階は進み具合 p から決め、時間では切り替えない\n- 動きを減らす設定では固定を解除し、完成した 4 段目だけを表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-pin-scrub/demo.html", "en": "Pin + scrub — Pin + scrub\n\nBuild an effect that pins the screen while scrolling and swaps only the content through four steps. The outer section is 400vh tall and holds a 100vh box with position: sticky; top: 0. Compute the progress p (0 to 1) as p=0 when the section's top reaches the top of the screen and p=1 when its bottom reaches the bottom, and show step floor(p × 4). Stack the step visuals in the same place, switch them with a 0.7-second opacity and translateY(24px) transition, and fill the four ticks at the bottom up to the current step. With GSAP ScrollTrigger, `pin: true, scrub: true` does the same. Implement it with plain CSS and JavaScript only, with no library.\n\nDo not drop:\n- Keep the sticky box at 100vh inside a 400vh section; changing the section height moves the step boundaries\n- Steps are chosen from scroll progress p, never from a timer\n- Under prefers-reduced-motion, release the pin and show only the completed fourth step\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-pin-scrub/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-pin-scrub/demo.html", "html": "\n\n\n\n\n18 ピン留め＋スクラブ — Pin + scrub\n\n\n\n
\n
\n

18

\n

ピン留め＋スクラブ

\n

Pin + scrub

\n

画面を固定して中身だけ進む

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
\n
\n
\n
\n

Step 01

\n

見出しが入ります

\n

本文のダミーです。段階ごとに中身が入れ替わります。

\n
\n
\n
\n

Step 02

\n

見出しが入ります

\n

本文のダミーです。画面は動かず、中身だけが進みます。

\n
\n
\n
\n

Step 03

\n

見出しが入ります

\n

本文のダミーです。ここまでの段階は目盛りで確かめられます。

\n
\n
\n
\n

Step 04

\n

見出しが入ります

\n

本文のダミーです。最後の段階で、固定が解けます。

\n
\n
\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-pin-scrub", "en": "https://design-vault.pages.dev/en/designs/motion-pin-scrub", "json": "https://design-vault.pages.dev/ai/assets/motion-pin-scrub.json", "designJson": null } }