{
"id": "motion:motion-compare-wipe",
"slug": "motion-compare-wipe",
"kind": "motion",
"title": {
"ja": "ビフォーアフター",
"en": "Before/after wipe"
},
"aiName": "Before/after wipe",
"summary": {
"ja": "仕切りが動いて前後が入れ替わる",
"en": "A divider sweeps across and swaps the before and after images"
},
"number": 30,
"group": "media-depth",
"techniques": [
"clip-path",
"position-sticky",
"scroll-progress"
],
"rules": [
{
"ja": "上の図は仕切りの左側だけを見せ、切り抜きで入れ替える。拡大はしない",
"en": "The top image shows only the left of the divider and swaps by clipping, not scaling"
},
{
"ja": "仕切りは区画の中で動き、図を収める箱は sticky で画面に留まる",
"en": "The divider moves inside the pinned section; the frame stays fixed on screen"
},
{
"ja": "動きを減らす設定では、後の図を全面に出して止める",
"en": "With reduced motion, show the after image in full and stop"
}
],
"reproduction": {
"prompt": {
"ja": "ビフォーアフター — Before/after wipe\n\n画面に固定した 2 枚の図（CSS の図形）を重ね、「前」の図を下、「後」の図を上に置く。仕切り線とつまみは、区画の高さ 300vh のスクロールに合わせて左から右へ動く。\n上の図は `clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0)` で仕切りの左側だけを見せ、--p が 0 のとき前、1 のとき後が全面に出る。\n図を収める箱は 100vh の position: sticky にし、「後」の札は上の図の左端、「前」の札は下の図の右端に置く。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 上の図は仕切りの左側だけを見せ、切り抜きで入れ替える。拡大はしない\n- 仕切りは区画の中で動き、図を収める箱は sticky で画面に留まる\n- 動きを減らす設定では、後の図を全面に出して止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-compare-wipe/demo.html",
"en": "Before/after wipe — Before/after wipe\n\nStack two CSS-drawn images on the screen: the \"before\" image underneath and the \"after\" image on top. A divider line and its handle travel from left to right as the user scrolls through a 300vh section.\nThe top image uses `clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0)` to show only the left of the divider, so at --p 0 the before image fills the frame and at --p 1 the after image does.\nHold the frame in a 100vh position: sticky box, put the \"after\" tag at the left edge of the top image and the \"before\" tag at the right edge of the bottom image.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The top image shows only the left of the divider and swaps by clipping, not scaling\n- The divider moves inside the pinned section; the frame stays fixed on screen\n- With reduced motion, show the after image in full and stop\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-compare-wipe/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-compare-wipe/demo.html",
"html": "\n\n\n\n\n30 ビフォーアフター — Before/after wipe\n\n\n\n\n