{
"id": "motion:motion-scrollytelling",
"slug": "motion-scrollytelling",
"kind": "motion",
"title": {
"ja": "スクロールテリング",
"en": "Scrollytelling"
},
"aiName": "Scrollytelling",
"summary": {
"ja": "文章に合わせて固定図が切り替わる",
"en": "A fixed figure changes with the text"
},
"number": 19,
"group": "pin-nav",
"techniques": [
"position-sticky",
"intersection-observer"
],
"rules": [
{
"ja": "図は文章と同じ段の番号で切り替え、段と図がずれないようにする",
"en": "The figure switches by the same step index as the text, so a step and its figure never disagree"
},
{
"ja": "幅 640px 以下では図を横に並べず、文章の上に固定する",
"en": "At 640px and below, pin the figure above the text instead of beside it"
},
{
"ja": "動きを減らす設定では切り替えの transition を無くす",
"en": "Under prefers-reduced-motion, remove the cross-fade transition"
}
],
"reproduction": {
"prompt": {
"ja": "スクロールテリング — Scrollytelling\n\n文章を読み進めると、右側の固定された図が読んでいる段に合わせて切り替わる演出を作ってください。左に 4 段の文章を並べ、各段の高さは 80vh とします。右には position: sticky; top: 40px の図を置き、高さは 70vh（最大 520px）とします。rootMargin を '-45% 0px -45% 0px' にした IntersectionObserver で中央の帯に入った段を求め、対応する図を 0.7 秒の opacity で切り替えます。幅 640px 以下では図を文章の上に固定して高さ 38vh とし、文章はその下で流します。動きを減らす設定では切り替えを瞬時にし、最後の段の図を表示してください。CSS と IntersectionObserver だけで実装し、ライブラリは使わないでください。\n\n外すと崩れる点:\n- 図は文章と同じ段の番号で切り替え、段と図がずれないようにする\n- 幅 640px 以下では図を横に並べず、文章の上に固定する\n- 動きを減らす設定では切り替えの transition を無くす\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-scrollytelling/demo.html",
"en": "Scrollytelling — Scrollytelling\n\nAs the reader scrolls a column of text, a fixed figure on the right switches to match the paragraph at the viewport's centre. Lay out four paragraph blocks on the left, each min-height 80vh, and a position: sticky figure at top: 40px on the right, 70vh high and at most 520px. Use an IntersectionObserver with rootMargin: '-45% 0px -45% 0px' to find the paragraph in the middle band, and cross-fade the matching panel over 0.7 seconds. At 640px wide or less, pin the figure above the text at 38vh and let the text scroll beneath it. Under prefers-reduced-motion, switch without transition and show the fourth panel. Implement it with CSS and IntersectionObserver only, with no library.\n\nDo not drop:\n- The figure switches by the same step index as the text, so a step and its figure never disagree\n- At 640px and below, pin the figure above the text instead of beside it\n- Under prefers-reduced-motion, remove the cross-fade transition\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-scrollytelling/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-scrollytelling/demo.html",
"html": "\n\n\n\n\n19 スクロールテリング — Scrollytelling\n\n\n\n\n