{
"id": "motion:motion-turntable",
"slug": "motion-turntable",
"kind": "motion",
"title": {
"ja": "ターンテーブル",
"en": "Scroll-driven character turnaround"
},
"aiName": "Scroll-driven character turnaround",
"summary": {
"ja": "スクロールで人物が回り、正面・斜め・横・背面が入れ替わる",
"en": "A figure turns as you scroll, swapping its front, three-quarter, side and back views"
},
"number": 61,
"group": "media-depth",
"techniques": [
"scroll-progress",
"position-sticky",
"svg"
],
"rules": [
{
"ja": "絵の差し替えは幅が 0 の瞬間だけ。半分の幅で替えると、別人が回り込んだように見える",
"en": "Swap the picture only at zero width; swapping at half width looks like someone else stepping in"
},
{
"ja": "向き別の絵は同じキャンバス・同じ足元の高さで描く。足元が揃わないと回る間に人物が上下する",
"en": "Draw every view on the same canvas with the same foot line, or the figure bobs as it turns"
},
{
"ja": "動きを減らす設定では、4 枚を横に並べて止める",
"en": "With reduced motion on, show the four views side by side and stop"
}
],
"reproduction": {
"prompt": {
"ja": "ターンテーブル — Scroll-driven character turnaround\n\nキャラクターの向き別の絵 4 枚（正面・斜め・横・背面）を、スクロールに合わせて 1 枚ずつ回して見せる。区画の高さは 400vh、中の箱は 100vh の sticky にする。\n--p を 0.04〜0.96 の範囲で 4 等分し、それぞれの区間で 1 枚を見せる。区間の境目の前後 7%（1 枚分の長さに対して）では、絵の横幅を `scaleX` で 1 → 0 → 1 と縮めて広げ、幅が 0 になった瞬間に次の絵へ差し替える。縮み方は sin のなめらかさにする。\n左に大きな番号（01 / 04）と向きの名前、下に 4 枚の小さな絵を並べて今の 1 枚に下線を引く。足元には楕円の上に 36 本の目盛りを置き、--p に合わせて 1 周回し、手前の目盛りだけを濃くする。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 絵の差し替えは幅が 0 の瞬間だけ。半分の幅で替えると、別人が回り込んだように見える\n- 向き別の絵は同じキャンバス・同じ足元の高さで描く。足元が揃わないと回る間に人物が上下する\n- 動きを減らす設定では、4 枚を横に並べて止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-turntable/demo.html",
"en": "Scroll-driven character turnaround — Scroll-driven character turnaround\n\nShow four turnaround views of a character (front, three-quarter, side, back) one at a time as the page scrolls. Make the section 400vh tall and the box inside a 100vh sticky element.\nSplit --p between 0.04 and 0.96 into four equal spans, one view each. Within 7% of a view's span on either side of a boundary, squeeze the figure with `scaleX` from 1 to 0 and back to 1, and swap to the next view at the moment the width is 0. Use a sine curve for the squeeze.\nPut a large counter (01 / 04) and the view's name on the left, and a row of the four small views below with the current one underlined. Under the feet, place 36 ticks on an ellipse that turn once over --p, with only the near ticks drawn dark.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- Swap the picture only at zero width; swapping at half width looks like someone else stepping in\n- Draw every view on the same canvas with the same foot line, or the figure bobs as it turns\n- With reduced motion on, show the four views side by side and stop\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-turntable/demo.html"
},
"code": {
"url": "https://design-vault.pages.dev/designs/motion-turntable/demo.html",
"html": "\n\n\n\n\n61 ターンテーブル — Scroll-driven character turnaround\n\n\n\n\n