ちいつる

スクロール演出(応用)

スクロール速度スキュー

速くスクロールするほど中身がぐにゃっと傾き、止まるとシュッと戻る。スクロール速度を物理量として見せるキネティックな演出。

ENGLISH

Scroll Velocity Skew

  • JS
73スクロール演出(応用) の一覧 →

プレビュー

スクロール

操作枠内をスクロールすると動きます。

実装メモ

毎フレーム『スクロール量の差分=速度』を計算し、skewY と scaleY に反映。指を離すと 0 に減衰します。傾きの強さは factor、戻る速さは ease で調整。実ページでは window のスクロールに付け替えてください。

コード(コピーして使えます)

<div class="sv-scroller">
  <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>

タグ

関連パーツ