{ "id": "motion:motion-sticky-cta", "slug": "motion-sticky-cta", "kind": "motion", "title": { "ja": "追従 CTA", "en": "Sticky CTA bar" }, "aiName": "Sticky CTA bar", "summary": { "ja": "途中から下端にボタン帯が現れる", "en": "A button bar rises from the bottom edge partway down the page" }, "number": 44, "group": "ambient", "techniques": [ "css-transition", "scroll-progress" ], "rules": [ { "ja": "名札の中では出さない。名札を抜けて一画面ぶん進んでから初めて現れる", "en": "Stay hidden inside the title block; appear only after one further screen" }, { "ja": "終わりの帯に着いたら隠す。帯がボタンと重なって最後の見出しを隠さないようにする", "en": "Hide once the closing band arrives, so the bar never covers the final content" }, { "ja": "ボタンは一行に収める。375px でも折り返さず、案内文は省略して収める", "en": "Keep the button on one line at 375px; truncate the copy rather than wrapping" }, { "ja": "動きを減らす設定では JS で隠さず、帯は完成した位置に止めて常に見せる", "en": "Under reduced motion, never hide it; keep the bar fixed in its final position" } ], "reproduction": { "prompt": { "ja": "追従 CTA — Sticky CTA bar\n\n画面下端に固定したボタン帯（高さ約 60px、ボタン 1 つと一行の案内文）を置く。\n名札（高さ 72vh）を抜けて、さらに画面 1 つぶん進んだところで、帯を translateY(100%) の位置から translateY(0) へ 0.7 秒の ease で持ち上げる。\n終わりの帯（`.dv-end`）の上端が画面の下端に入ったら、帯を下へ戻して隠す。\n実装は CSS の transition とスクロールの位置を読む 1 本の passive リスナーだけで行い、ライブラリは使わない。\n\n外すと崩れる点:\n- 名札の中では出さない。名札を抜けて一画面ぶん進んでから初めて現れる\n- 終わりの帯に着いたら隠す。帯がボタンと重なって最後の見出しを隠さないようにする\n- ボタンは一行に収める。375px でも折り返さず、案内文は省略して収める\n- 動きを減らす設定では JS で隠さず、帯は完成した位置に止めて常に見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-sticky-cta/demo.html", "en": "Sticky CTA bar — Sticky CTA bar\n\nPin a button bar to the bottom edge of the viewport, about 60px tall, holding one button and one line of copy.\nOnce the reader has passed the 72vh title block and scrolled one further screen, slide the bar from translateY(100%) up to translateY(0) over 0.7s with the ease curve.\nWhen the top of the closing band (`.dv-end`) enters the bottom of the viewport, slide the bar back down and hide it.\nImplement it with a CSS transition and a single passive scroll listener that reads the position; no library.\n\nDo not drop:\n- Stay hidden inside the title block; appear only after one further screen\n- Hide once the closing band arrives, so the bar never covers the final content\n- Keep the button on one line at 375px; truncate the copy rather than wrapping\n- Under reduced motion, never hide it; keep the bar fixed in its final position\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-sticky-cta/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-sticky-cta/demo.html", "html": "\n\n\n\n\n44 追従 CTA — Sticky CTA bar\n\n\n\n
\n
\n

44

\n

追従 CTA

\n

Sticky CTA bar

\n

途中から下端にボタン帯が現れる

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。名札を抜けて一画面ぶん進むと、下端に帯が現れます。

\n
\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。帯は読み進めているあいだ、下端に残ります。

\n
\n
\n
\n
\n

Section 3

\n

見出しが入ります

\n

本文のダミーです。終わりの帯が画面に入ると、帯は隠れます。

\n
\n
\n
\n
\n

Section 4

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