{ "id": "motion:motion-horizontal-scroll", "slug": "motion-horizontal-scroll", "kind": "motion", "title": { "ja": "横スクロール", "en": "Horizontal scroll" }, "aiName": "Horizontal scroll", "summary": { "ja": "縦スクロールで横に流れる", "en": "Vertical scrolling drives a horizontal strip" }, "number": 22, "group": "pin-nav", "techniques": [ "scroll-progress", "position-sticky" ], "rules": [ { "ja": "帯は縦スクロールの量だけ動く。ボタンやドラッグでは動かさない", "en": "The strip moves only with vertical scroll; no buttons or drag" }, { "ja": "overflow: hidden は sticky の箱にだけ付け、祖先には付けない", "en": "Put overflow: hidden on the sticky box only, never on an ancestor, or sticky stops working" }, { "ja": "動きを減らす設定では帯を止め、カードを折り返して縦に並べる", "en": "Under reduced motion, stop the strip and wrap the cards into a static grid" } ], "reproduction": { "prompt": { "ja": "横スクロール — Horizontal scroll\n\n縦スクロールの距離を取るため、高さ 400vh の区画を置き、その中に 100vh の sticky な箱を入れる。\n箱の中の横長の帯（カード 5 枚、各 min(82vw, 760px) 幅、間隔 40px）を、スクロール量 0〜1 の CSS 変数 --p で transform: translateX(calc(var(--p) * -1 * (100% - 100vw))) として左へ動かす。\nsticky の箱には overflow: hidden を付けて横スクロールバーを出さず、縦のスクロール以外では動かさない。\nCSS 変数の更新は小さな scroll リスナーだけで行い、ライブラリは使わない。\n\n外すと崩れる点:\n- 帯は縦スクロールの量だけ動く。ボタンやドラッグでは動かさない\n- overflow: hidden は sticky の箱にだけ付け、祖先には付けない\n- 動きを減らす設定では帯を止め、カードを折り返して縦に並べる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-horizontal-scroll/demo.html", "en": "Horizontal scroll — Horizontal scroll\n\nCreate a 400vh section and place a 100vh sticky box inside it to take up the vertical scroll distance.\nInside the box, slide a wide strip of five cards (each min(82vw, 760px) wide, 40px apart) to the left with transform: translateX(calc(var(--p) * -1 * (100% - 100vw))), where --p is the 0 to 1 scroll progress.\nGive the sticky box overflow: hidden so no horizontal scrollbar appears, and move the strip only with vertical scrolling.\nUpdate --p from one small passive scroll listener; no library.\n\nDo not drop:\n- The strip moves only with vertical scroll; no buttons or drag\n- Put overflow: hidden on the sticky box only, never on an ancestor, or sticky stops working\n- Under reduced motion, stop the strip and wrap the cards into a static grid\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-horizontal-scroll/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-horizontal-scroll/demo.html", "html": "\n\n\n\n\n22 横スクロール — Horizontal scroll\n\n\n\n
\n
\n

22

\n

横スクロール

\n

Horizontal scroll

\n

縦スクロールで横に流れる

\n

SCROLL ↓

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

Panel 01

\n

見出しが入ります

\n
\n
\n
\n

Panel 02

\n

見出しが入ります

\n
\n
\n
\n

Panel 03

\n

見出しが入ります

\n
\n
\n
\n

Panel 04

\n

見出しが入ります

\n
\n
\n
\n

Panel 05

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