{ "id": "motion:motion-scroll-linked", "slug": "motion-scroll-linked", "kind": "motion", "title": { "ja": "スクロール連動", "en": "Scroll-linked animation" }, "aiName": "Scroll-linked animation", "summary": { "ja": "スクロール量に合わせて進む（読了バー）", "en": "Progresses with scroll position, like a reading progress bar" }, "number": 9, "group": "scroll-linked", "techniques": [ "scroll-progress", "css-transition" ], "rules": [ { "ja": "バーの幅はスクロール量だけで決まり、時間では進まない", "en": "The bar's width depends only on scroll position, never on time" }, { "ja": "ページ末尾で幅がちょうど 100% になる", "en": "The bar reaches exactly 100% at the end of the page" }, { "ja": "動きを減らす設定では transition を外し、即座に追従させる", "en": "With reduced motion, drop the transition so the bar follows at once" } ], "reproduction": { "prompt": { "ja": "スクロール連動 — Scroll-linked animation\n\n長い本文の上端に、高さ 4px の読了バーを固定する。バーは画面の左端から伸び、ページ末尾で幅がちょうど 100% になる。\n伸びる部分は `scaleX(var(--p))` で幅を決め、transform-origin は左端に置く。--p はページ全体のスクロール量 `scrollY / (scrollHeight - innerHeight)` を 0〜1 に収めた値とし、scroll イベントを requestAnimationFrame で一度にまとめて読む。\nバーの下地は薄いグレーの 1 本、伸びる部分はアクセント色の 1 本だけにする。本文は幅 1080px 以下、行間 1.7 で 8 節に分ける。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- バーの幅はスクロール量だけで決まり、時間では進まない\n- ページ末尾で幅がちょうど 100% になる\n- 動きを減らす設定では transition を外し、即座に追従させる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-scroll-linked/demo.html", "en": "Scroll-linked animation — Scroll-linked animation\n\nFix a 4px reading progress bar to the top of a long article. The bar grows from the left edge and reaches exactly 100% at the end of the page.\nDrive the fill with `scaleX(var(--p))` and set its transform-origin to the left edge. Let --p be the page scroll amount `scrollY / (scrollHeight - innerHeight)` clamped to 0–1, and read scroll inside requestAnimationFrame so it updates once per frame.\nUse one thin grey track and one accent-coloured fill. Keep the text within 1080px, line-height 1.7, split into 8 sections.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The bar's width depends only on scroll position, never on time\n- The bar reaches exactly 100% at the end of the page\n- With reduced motion, drop the transition so the bar follows at once\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-scroll-linked/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-scroll-linked/demo.html", "html": "\n\n\n\n\n09 スクロール連動 — Scroll-linked animation\n\n\n\n
\n
\n

09

\n

スクロール連動

\n

Scroll-linked animation

\n

スクロール量に合わせて進む（読了バー）

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n
\n

本文のダミーです。読み始めると画面の上端に細い帯が現れ、スクロールした量に合わせて右へ伸びていきます。

\n

段落のダミーです。ここでは文章の長さを本物の記事に近づけ、帯がどの位置で何割まで進んでいるかを確かめられるようにしています。

\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n
\n

本文のダミーです。見出しや段落の高さは、実際の読み物を想定して少しずつ変えてあります。

\n

段落のダミーです。スクロールを止めれば帯も止まり、戻せば帯も戻ります。時間ではなく、位置だけで決まる動きです。

\n
\n
\n
\n

Section 3

\n

見出しが入ります

\n
\n

本文のダミーです。文章の途中で読むのをやめた人にも、どこまで読んだかが一目で伝わります。

\n

段落のダミーです。ここでは中立な文だけを置いています。

\n
\n
\n
\n

Section 4

\n

見出しが入ります

\n
\n

本文のダミーです。読了の目安として、帯の長さが全体の進み具合と揃っていることを確かめてください。

\n

段落のダミーです。本文の行間は 1.7 で、幅は 1080px を超えません。

\n
\n
\n
\n

Section 5

\n

見出しが入ります

\n
\n

本文のダミーです。段落が続くと、帯は少しずつ、着実に伸びていきます。

\n

段落のダミーです。ひとつの節が長くても、帯の進みは一定です。

\n
\n
\n
\n

Section 6

\n

見出しが入ります

\n
\n

本文のダミーです。中盤に入り、残りの長さを感じ取れるのがこの帯の役目です。

\n

段落のダミーです。ここでも説明は必要最小限にしています。

\n
\n
\n
\n

Section 7

\n

見出しが入ります

\n
\n

本文のダミーです。終わりが近づくと、帯はほとんど右端に届いています。

\n

段落のダミーです。残りの段落は、あと一節だけです。

\n
\n
\n
\n

Section 8

\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-scroll-linked", "en": "https://design-vault.pages.dev/en/designs/motion-scroll-linked", "json": "https://design-vault.pages.dev/ai/assets/motion-scroll-linked.json", "designJson": null } }