スクロール速度スキュー
速くスクロールするほど中身がぐにゃっと傾き、止まるとシュッと戻る。スクロール速度を物理量として見せるキネティックな演出。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- スクロール速度を体感させるキネティックな一覧
- 作品・ポートフォリオの遊びのある演出
- 勢いよく送る操作が主体の画面
- 避ける場面
- 文章を読むページ（傾きで可読性が落ちる）
- 業務画面・フォーム
- 構成要素
- スクロール容器
- ヒント
- カード列
- 持っている状態
- 通常
- キーボード
Tab でスクロール容器へ（tabindex=0）、↑↓/PageDown でスクロール
- 支援技術
カードは番号の文字のみで読み上げ順は不変。傾きは transform なのでレイアウトは動かない。動きは速度依存で予測しにくいので reduced-motion では傾けない
- 動き
速度×0.45 を skewY（上限 ±14°）に、毎フレーム 0.82 倍で減衰し止まると戻る。速度を物理量として見せる
デザインの要点
- 速度は scroll イベントごとの scrollTop の差分。傾き＝速度 × 0.45 を ±14° で頭打ちにし、勢いは出しつつ形が崩れない範囲に収める
- 戻りは毎フレーム 0.82 倍の減衰。cubic-bezier でなく減衰なので、途中で再びスクロールしても速度が滑らかに継ぎ足される
- scaleY は 1＋|傾き|/60 とごく控えめ。伸び縮みを強くすると「ぐにゃあ」が過剰になり、傾きの意味が薄れる
- rAF ループは傾きが 0 に戻ったら止め、次の scroll で再開する。静止中も回し続けると電池を消費する
実装メモ
毎フレーム『スクロール量の差分＝速度』を計算し、skewY と scaleY に反映。指を離すと 0 に減衰します。傾きの強さは factor、戻る速さは ease で調整。実ページでは window のスクロールに付け替えてください。
コード（コピーして使えます）
<div class="sv-scroller" tabindex="0">
<p class="sv-hint">勢いよくスクロール ↓</p>
<div class="sv-track">
<div class="sv-card">01</div>
<div class="sv-card">02</div>
<div class="sv-card">03</div>
<div class="sv-card">04</div>
<div class="sv-card">05</div>
<div class="sv-card">06</div>
</div>
</div>