§16-01
Scroll-driven animation
スクロール量に連動してアニメーションを進める。
読み進める速さに合わせて図や説明が変化し、手順や構造を段階的に伝えられる。製品紹介やストーリー形式の記事で使う。
実装のポイント対応ブラウザでは CSS の animation-timeline: scroll() で JS なしに進捗を連動できる。JS で実装する場合は scroll を passive で購読し、rAF で更新をまとめる。
- アニメーション
- ブラウザ API
§16
モーション・体感
Motion
- Patterns
- 16
- Demos
- 16
§16-03
View Transitions API
ページや状態の切り替えを滑らかなアニメで繋ぐ。
一覧から詳細への移動で要素の連続性が伝わり、どこへ移ったかを追いやすい。カードや画像をクリックして開く流れに向く。
実装のポイントdocument.startViewTransition で DOM 更新を包み、::view-transition-old/new を CSS で装飾する。非対応時は更新だけ実行する。
- アニメーション
- ブラウザ API
§16-04
FLIP animation
要素の位置変化を滑らかな移動として見せる。
並び替えや追加で要素が飛ぶ動きを追えるようにする。一覧やグリッドの変化で、どこへ移ったか分からなくなる問題に効く。
実装のポイントFirst で位置を記録し、Last で新位置を測り、差分を Invert した transform から Play で 0 に戻す。transform のみを動かすので reflow を伴わず滑らかになる。
- アニメーション
- ジェスチャー
§16-05
Spring physics scroll
ばねの物理でスクロールを滑らかに追従させる。
操作に自然な加減速が付き、画面の動きが機械的に感じられなくなる。カルーセルやシートなど、位置が目標値に収束する動きに向く。
実装のポイントばねは stiffness と damping で挙動が決まり、damping が低いほど行き過ぎて揺れる。スクロールに適用する場合はスクロール位置を目標値として追従させる。
- アニメーション
§16-06
Snap scroll
スクロールが各セクションの位置に吸着する。
スクロールを止めた位置がセクションの境目に揃い、途中で切れた表示を防ぐ。スライド形式の紹介ページや画像ギャラリーに向く。
実装のポイント親に scroll-snap-type: x mandatory、子に scroll-snap-align を付けるだけで成立する。子が表示域より大きいなら proximity にする。
- CSS のみ
§16-07
Sticky header / shrink on scroll
スクロールするとヘッダーが縮んで上部に留まる。
ナビゲーションを常に手元に置きつつ、読み進めるときは本文の面積を確保できる。長い記事や商品ページで使う。
実装のポイントposition: sticky のヘッダー高さを閾値で切り替える。高さ変化でスクロール位置がずれて閾値付近で点滅しやすいので、縮む/戻る閾値に差を付けて揺れを防ぐ。
- アニメーション
§16-08
Hover micro-interaction
ボタンに触れたとき小さく弾む反応を返す。
押せる要素だと伝え、操作に手応えを与える。ボタンとリンクの区別がつきにくいデザインで誤操作を減らす。
実装のポイントtransform と box-shadow だけを transition させ、width や margin を動かさない。hover が無いタッチ端末向けに :active でも同じ手応えを返す。
- CSS のみ
- アニメーション
残り 8 件のパターンLike burst (ハート爆発) / Confetti / Cursor follower …
§16-09
Like burst (ハート爆発)
タップした瞬間に粒子を放つ演出。
いいねの操作に手応えを与え、押したことが確実に伝わる。反応を繰り返し集めたい SNS やコメント欄で使う。
実装のポイント粒子は絶対配置の要素を数個放射状に飛ばし、animationend で DOM から除去する。ボタン本体には aria-pressed を付け、演出とは独立して状態を伝える。
- アニメーション
- 状態管理
§16-11
Cursor follower
マウスカーソルに追従する装飾要素を表示する。
ポインタの動きに反応する演出で、サイトの印象や遊び心を作る。ランディングページやポートフォリオなど、見せることが目的の画面で使う。
実装のポイント座標は currentTarget 基準で計算し、追従要素自体は pointer-events: none にする。遅れて付いてくる円は transition より rAF の補間のほうが滑らかに制御できる。
- アニメーション
§16-12
3D tilt card
マウスの位置に合わせてカードが立体的に傾く。
注目させたいカードに奥行きを与えて目を引く。ランディングページや作品一覧など、演出が許される場面に向く。
実装のポイント親に perspective を与えて rotateX/rotateY をポインタ位置から算出し、mouseleave で 0 に戻す。pointermove を rAF で間引くと高頻度イベントでも描画が詰まらない。
- アニメーション
§16-13
Ambient shader / orb
背景にぼかした光の円を漂わせる。
静止した画面に動きを与え、待機中やヒーロー領域の印象を柔らかくする。内容を邪魔しない控えめな装飾として使う。
実装のポイントblur を掛けた大きな円を transform だけで漂わせると GPU 合成で済み軽い。常時動く装飾なので prefers-reduced-motion 時は animation を止める。
- CSS のみ
- アニメーション
§16-14
Toast slide-in
画面の端から通知が滑り込んで一定時間で消える。
操作の結果を画面の端に短く知らせ、作業を中断させずに消える。保存完了やエラーなど、確認を求めない軽い通知に向く。
実装のポイント表示位置の端から transform で入り、一定時間後に自動で消す。通知内容は role="status" の live region で読み上げ、Undo などの操作付きは表示時間を長めにする。
- アニメーション
- 非同期
§16-15
Number tick animation
数値が目標値まで変化するアニメーションで表示する。
実績や合計の大きさに注目を集め、増えた印象を強められる。ランディングページの実績欄やダッシュボードの主要指標に向く。
実装のポイントrAF で経過時間から easing 済みの値を算出し、tabular-nums で桁幅を固定して横揺れを防ぐ。画面に入ったときに IntersectionObserver で開始させるとよい。
デモはカウンターアニメと共通です。
- アニメーション
- タイマー
§16-16
Skeleton → fade in
読み込み中の骨組みから実データへ滑らかに切り替える。
待ち時間に画面の形を先に見せて、完成時の切り替えを穏やかにする。表示がいきなり現れて目が泳ぐ問題に効く。
実装のポイントスケルトンは実コンテンツと同じ寸法で組み、差し替え時のレイアウトシフトを防ぐ。差し替え後は opacity の短い transition で実データをフェードインさせる。
- アニメーション
- 非同期
- モック