スクロール連動マーキー — 動きの伝え方辞典

scroll

scroll-driven marquee / scroll velocity marquee

スクロール連動マーキー

一定速度で流れるマーキーに、スクロールの速度と方向を加算する動き。速くスクロールするほど加速し、逆スクロールで逆流する。等速のmarqueeに慣性が宿り、ページ全体の疾走感につながる。

01 — Demo video

Play live →

02 — Prompt template

scroll-driven marquee を実装してください。

- テキストを2セット以上複製して横に並べ、translateX をループさせる(1セット分の幅を超えたら巻き戻す)
- requestAnimationFrame で毎フレーム offset を進める。基本速度は {{speed}}px/s(CSS animationではなくrAFで自前ループにする)
- 毎フレームの scrollY 差分 × {{factor}} を速度に加算し、lerp(係数 {{lerp}})で基本速度へ滑らかに戻す
- 下スクロールで加速、上スクロールでは速度が負になり逆流させる(負のoffsetのmodulo計算に注意)
- 移動は translateX のみで行い、will-change: transform を指定する(left等のアニメーション禁止)
- prefers-reduced-motion 時は自動の流れもスクロール加算も止め、静止したテキストとして表示する

scroll-driven marquee を実装してください。

- テキストを2セット以上複製して横に並べ、translateX をループさせる(1セット分の幅を超えたら巻き戻す)
- requestAnimationFrame で毎フレーム offset を進める。基本速度は {{speed}}px/s(CSS animationではなくrAFで自前ループにする)
- 毎フレームの scrollY 差分 × {{factor}} を速度に加算し、lerp(係数 {{lerp}})で基本速度へ滑らかに戻す
- 下スクロールで加速、上スクロールでは速度が負になり逆流させる(負のoffsetのmodulo計算に注意)
- 移動は translateX のみで行い、will-change: transform を指定する(left等のアニメーション禁止)
- prefers-reduced-motion 時は自動の流れもスクロール加算も止め、静止したテキストとして表示する

scroll-driven marquee を実装してください。

- テキストを2セット以上複製して横に並べ、translateX をループさせる(1セット分の幅を超えたら巻き戻す)
- requestAnimationFrame で毎フレーム offset を進める。基本速度は {{speed}}px/s(CSS animationではなくrAFで自前ループにする)
- 毎フレームの scrollY 差分 × {{factor}} を速度に加算し、lerp(係数 {{lerp}})で基本速度へ滑らかに戻す
- 下スクロールで加速、上スクロールでは速度が負になり逆流させる(負のoffsetのmodulo計算に注意)
- 移動は translateX のみで行い、will-change: transform を指定する(left等のアニメーション禁止)
- prefers-reduced-motion 時は自動の流れもスクロール加算も止め、静止したテキストとして表示する

03 — Params

speed(基本速度 px/s) — 範囲 0〜200 / 初期 60
スクロールしていないときの流速。60〜100px/sが読める上限の目安。0にするとスクロール中だけ流れる。
factor(スクロール加算の係数) — 範囲 1〜10 / 初期 4
スクロール1pxを何pxの流れに変換するか。4前後で「スクロールに引っ張られる」感が出る。
lerp(慣性の粘り) — 範囲 0.05〜0.3 / 初期 0.08
加算分が基本速度へ戻る速さ。小さいほど余韻が長く、止まったあとも滑走が残る。

04 — Vocab

基本速度+加算 — 常時の等速にスクロール由来の速度を足す設計。止まっていても流れ続け、スクロールで表情が変わる。等速のみが通常のmarquee。
シームレスループ — 同じ内容を2セット以上並べ、1セット分進んだら巻き戻す手法。継ぎ目なく無限に流れているように見せる。
velocity — スクロール速度。毎フレームのscrollY差分で求める。velocity-skewは同じ入力を「傾き」に使うが、本項は「流速」に使う。
方向反転 — 速度が負になったとき逆向きに流すこと。offsetが負になるため、((offset % w) + w) % w で正の余りに正規化する。
scrub — スクロール量に位置を1対1で対応させる方式。本項の速度加算とは別物で、scrubはスクロールが止まるとマーキーも止まる。

05 — NG → OK examples

言い方: 「「マーキーをスクロールに反応させて」」

なぜNG: 「反応」が速度の加算なのか、スクロール量に位置を対応させるscrubなのか決まらない。CSS animationのままでは速度を動的に変えられないため中途半端な実装になりやすく、逆スクロールで巻き戻らないものも多い。

言い方: 「「scroll-driven marqueeを実装。rAFで基本60px/s+毎フレームのscrollY差分×4を加算、lerp 0.08で基本速度へ復帰。逆スクロールで逆流を許容、2セット複製してtranslateXでシームレスループ」」

なぜOK: 基本速度・加算係数・戻り・逆流の許容まで数値で指定している。「rAFで自前ループ」と伝えることで、速度を毎フレーム変えられる構造になる。