スクロール演出(応用)
スクロール速度スキュー
速くスクロールするほど中身がぐにゃっと傾き、止まるとシュッと戻る。スクロール速度を物理量として見せるキネティックな演出。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
実装メモ
毎フレーム『スクロール量の差分=速度』を計算し、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>