{ "id": "motion:motion-rotate-on-scroll", "slug": "motion-rotate-on-scroll", "kind": "motion", "title": { "ja": "スクロール回転", "en": "Rotate on scroll" }, "aiName": "Rotate on scroll", "summary": { "ja": "歯車や円盤がスクロールで回る", "en": "Gears and discs turn as you scroll" }, "number": 41, "group": "ambient", "techniques": [ "scroll-progress", "svg", "position-sticky" ], "rules": [ { "ja": "2 枚は逆向きに、同じ量（±360 度）回る", "en": "The two gears turn in opposite directions by the same amount (±360 degrees)" }, { "ja": "歯数は 2 枚とも 14 で、噛み合う位置は半ピッチずらして描いておく（回転で位置を変えない）", "en": "Both gears have 14 teeth and the offset is baked into the path, not applied by transform" }, { "ja": "回転は rotate() だけで行い、歯車の位置や大きさは動かさない", "en": "Turn only with rotate(); never move or resize the gears" }, { "ja": "動きを減らす設定では歯車を噛み合った初期の位置で止める", "en": "With reduced motion, the gears stay in their meshed starting position" } ], "reproduction": { "prompt": { "ja": "スクロール回転 — Rotate on scroll\n\nかみ合う歯車を 2 枚並べ、スクロールに合わせて回す。左の歯車は時計回りに 360 度、右の歯車は反時計回りに 360 度、スクロール量に対して同じ速さで回る。\n歯車は歯数 14 の SVG の `path` で描き、2 枚の歯は半ピッチずらして描いて、回ったときも歯が噛み合ったまま見えるようにする。\n区画は 300vh の高さにし、中に 100vh の sticky の箱を置く。回転は `transform: rotate(calc(var(--p) * ±360deg))` だけで行い、`--p` は区画のスクロール量から受け取る。\nCSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 2 枚は逆向きに、同じ量（±360 度）回る\n- 歯数は 2 枚とも 14 で、噛み合う位置は半ピッチずらして描いておく（回転で位置を変えない）\n- 回転は rotate() だけで行い、歯車の位置や大きさは動かさない\n- 動きを減らす設定では歯車を噛み合った初期の位置で止める\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-rotate-on-scroll/demo.html", "en": "Rotate on scroll — Rotate on scroll\n\nPlace two meshing gears side by side and turn them with scroll. The left gear turns 360 degrees clockwise and the right gear 360 degrees counter-clockwise, at the same rate per unit of scroll.\nDraw each gear as an SVG `path` with 14 teeth, and offset the teeth of the right gear by half a pitch so that the teeth stay meshed while they turn.\nMake the section 300vh tall with a 100vh sticky box inside. Turn the gears only with `transform: rotate(calc(var(--p) * ±360deg))`, taking `--p` from the section's scroll progress.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The two gears turn in opposite directions by the same amount (±360 degrees)\n- Both gears have 14 teeth and the offset is baked into the path, not applied by transform\n- Turn only with rotate(); never move or resize the gears\n- With reduced motion, the gears stay in their meshed starting position\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-rotate-on-scroll/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-rotate-on-scroll/demo.html", "html": "\n\n\n\n\n41 スクロール回転 — Rotate on scroll\n\n\n\n
\n
\n

41

\n

スクロール回転

\n

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