{ "id": "motion:motion-stacking-cards", "slug": "motion-stacking-cards", "kind": "motion", "title": { "ja": "カードスタック", "en": "Stacking cards" }, "aiName": "Stacking cards", "summary": { "ja": "カードが重なっていく", "en": "Cards stack over one another as you scroll" }, "number": 20, "group": "pin-nav", "techniques": [ "position-sticky", "scroll-progress" ], "rules": [ { "ja": "後のカードほど手前に重なる（z-index を --i で増やす）", "en": "Later cards sit above the earlier ones, so the stack reads top to bottom" }, { "ja": "各カードの背景は不透明にし、下のカードが透けないようにする", "en": "Cards have an opaque background so the card beneath does not show through" }, { "ja": "動きを減らす設定では sticky と縮みを解除し、通常の流れで並べる", "en": "Under prefers-reduced-motion, cards stay in normal flow with no sticky or scale" } ], "reproduction": { "prompt": { "ja": "カードスタック — Stacking cards\n\nスクロールに合わせてカードが画面上端に積み重なっていく演出を作ってください。カードは 5 枚で、それぞれ高さ 60vh を縦に並べ、position: sticky; top: calc(40px + var(--i) * 16px) を付けます（--i は 0〜4）。後のカードほど z-index が高く、手前に重なります。下になったカードは、次のカードが止まった位置まで来るにつれて scale を 1 から 0.95 へ縮めます。縮みの量は毎フレーム JavaScript で求め、transition は使いません。動きを減らす設定では sticky と縮みを解除し、5 枚を通常の流れで並べてください。CSS と素の JavaScript だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 後のカードほど手前に重なる（z-index を --i で増やす）\n- 各カードの背景は不透明にし、下のカードが透けないようにする\n- 動きを減らす設定では sticky と縮みを解除し、通常の流れで並べる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-stacking-cards/demo.html", "en": "Stacking cards — Stacking cards\n\nBuild a list of five cards that stack over each other as the page scrolls. Each card is 60vh tall, placed in normal flow, with position: sticky; top: calc(40px + var(--i) * 16px) where --i runs from 0 to 4. Later cards get a higher z-index so they cover the earlier ones. The card underneath scales from 1 down to 0.95 in proportion to how far the next card has reached its stuck position, computed in JavaScript each frame with no transition. Under prefers-reduced-motion, remove sticky and scaling and show the five cards in normal flow. Implement it with CSS and plain JavaScript only, with no library.\n\nDo not drop:\n- Later cards sit above the earlier ones, so the stack reads top to bottom\n- Cards have an opaque background so the card beneath does not show through\n- Under prefers-reduced-motion, cards stay in normal flow with no sticky or scale\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-stacking-cards/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-stacking-cards/demo.html", "html": "\n\n\n\n\n20 カードスタック — Stacking cards\n\n\n\n

カードスタック

Stacking cards

カードが重なっていく

SCROLL ↓

\n\n

Card 01 / 05

見出しが入ります

本文のダミーです。カードは下から重なってきます。

Card 02 / 05

見出しが入ります

本文のダミーです。後のカードほど手前に重なります。

Card 03 / 05

見出しが入ります

本文のダミーです。下になったカードは少しずつ縮みます。

Card 04 / 05

見出しが入ります

本文のダミーです。重なりの数は、カードの枚数で決まります。

Card 05 / 05

見出しが入ります

本文のダミーです。最後のカードは縮まずに残ります。

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