{ "id": "motion:motion-scroll-zoom", "slug": "motion-scroll-zoom", "kind": "motion", "title": { "ja": "スクロールズーム", "en": "Scale on scroll" }, "aiName": "Scale on scroll", "summary": { "ja": "画像が拡大して全画面に", "en": "An image scales up until it fills the whole screen" }, "number": 11, "group": "scroll-linked", "techniques": [ "scroll-progress", "position-sticky" ], "rules": [ { "ja": "拡大は区画の中で完結し、箱は sticky で画面に留まる", "en": "The zoom completes inside the pinned section; the box stays fixed on screen" }, { "ja": "拡大率は 0.5 から 1 の範囲に収める", "en": "Scale stays between 0.5 and 1" }, { "ja": "動きを減らす設定では拡大せず、全画面の状態で表示する", "en": "With reduced motion, show the full-screen end state without scaling" } ], "reproduction": { "prompt": { "ja": "スクロールズーム — Scale on scroll\n\n画像が画面の半分の大きさで現れ、スクロールに合わせて全画面まで広がる。区画の高さは 300vh、画像を収める箱は 100vh の position: sticky にする。\n拡大率は `scale(calc(0.5 + var(--p) * 0.5))` とし、角丸は `calc((1 - var(--p)) * 32px)` で、--p が 1 になったところで角丸を 0 にする。\n画像の前後には本文を 1 段ずつ置き、拡大が終わってから次の本文が見えるようにする。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 拡大は区画の中で完結し、箱は sticky で画面に留まる\n- 拡大率は 0.5 から 1 の範囲に収める\n- 動きを減らす設定では拡大せず、全画面の状態で表示する\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-scroll-zoom/demo.html", "en": "Scale on scroll — Scale on scroll\n\nAn image appears at half the screen size and expands to full screen as the user scrolls. Make the section 300vh tall and the box that holds the image a 100vh sticky element.\nUse `scale(calc(0.5 + var(--p) * 0.5))` for the scale, and `calc((1 - var(--p)) * 32px)` for the corner radius so the corners reach 0 when --p is 1.\nPlace one paragraph of text before and after the image, so the next paragraph appears only after the zoom has finished.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The zoom completes inside the pinned section; the box stays fixed on screen\n- Scale stays between 0.5 and 1\n- With reduced motion, show the full-screen end state without scaling\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-scroll-zoom/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-scroll-zoom/demo.html", "html": "\n\n\n\n\n11 スクロールズーム — Scale on scroll\n\n\n\n
\n
\n

11

\n

スクロールズーム

\n

Scale on scroll

\n

画像が拡大して全画面に

\n

SCROLL ↓

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

Section 1

\n

見出しが入ります

\n

本文のダミーです。スクロールすると、下の画像が画面の半分の大きさから広がります。

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

見出しが入ります

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

Section 2

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