mcpField
S
scroll-animations

scroll-animations

github.com/dylantarreデザイン・UI1321.1k 回インストール43 週間前に更新
リポジトリ

scroll-animations について

フロントエンドのデザイナーや開発者向けに、Disney の 12 のアニメーション原則をスクロール連動の動きに応用するスキルです。発火タイミング、パララックス、実装パターン、動きを抑える設定への代替案を扱います。

主な機能

  1. 01スクロール動作へのアニメーション原則の応用
  2. 02スクロール発火タイミングの指針
  3. 03Intersection Observer のパターン
  4. 04CSS スクロール連動アニメーション
  5. 05動きを抑える設定への代替案

活用シーン

  1. 01スクロールに応じたコンテンツ表示
  2. 02パララックスや固定ヘッダーの動作追加
  3. 03スクロール進捗バーのアニメーション
  4. 04動きを抑える設定への対応

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill scroll-animations

インストール後、Claude Code で/scroll-animationsを入力して読み込まれたか確認します。

詳細

スクロールアニメーション

スクロールをトリガーとする動きに、ディズニーの12の原則を適用します。

原則の適用

スクワッシュ＆ストレッチ：高速スクロール中は要素をわずかに圧縮し、スクロールが止まったら元の状態に落ち着かせます。

予備動作：コンテンツは完全に表示される前に、わずかに見えるようにします。表示率が10～20％になった時点でアニメーションを開始します。

演出：コンテンツは読み進める順序で表示します。上から下へ、左から右へと進行させます。

ストレート・アヘッドとポーズ・トゥ・ポーズ：「非表示」と「表示」の状態を明確に定義します。スクロール位置に応じて、その間を補間します。

フォロースルーとオーバーラッピング：表示を段階的にずらします。最初の要素はビューポートの20％で、次の要素は25％でトリガーする、といった具合です。

スローイン・スローアウト：スクロールによってトリガーされる表示には、イーズアウトを使用します。コンテンツが所定の位置に落ち着きます。

弧：視差効果のある要素は、スクロールに応じて曲線を描くように動きます。縦スクロールに合わせて、わずかな横方向のずれを加えます。

副次動作：フェード、スライド、スケールを組み合わせることで、より豊かな表示を実現できます。

タイミング：

  • 表示アニメーション：400～600ms（スクロールを続けられるようにします）
  • 視差効果：リアルタイム、1:1または分数比
  • スティッキー遷移：200～300ms

誇張：スクロールでは控えめにします。ペースはユーザーが操作します。スクロール速度そのものを誇張として活用します。

立体感のある描画：要素が突然ジャンプしたり、瞬間移動したりしてはいけません。すべてのスクロール位置で滑らかに補間します。

魅力：スクロールアニメーションは探索を促すものであり、妨げるものであってはなりません。

タイミングの推奨値

スクロールアニメーション期間トリガー位置イージング
フェードイン500ms20％表示ease-out
上方向スライド600ms15％表示ease-out
視差効果リアルタイム継続linear
スティッキーヘッダー200msしきい値ease-out
プログレスバーリアルタイム継続linear
セクション表示600ms25％表示ease-out

実装パターン

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 500ms ease-out, transform 600ms ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* CSS-only parallax */
.parallax-container {
  perspective: 1px;
  overflow-y: auto;
}

.parallax-slow {
  transform: translateZ(-1px) scale(2);
}

Intersection Observer パターン

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.2, rootMargin: '0px 0px -10% 0px' }
);

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

スクロール連動アニメーション（CSS）

@keyframes reveal {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.scroll-reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

主なルール

  1. スクロールを妨げたり、スクロールの動作を乗っ取ったりしないでください
  2. アニメーションは、正確なスクロール位置を要求せず、ビューポート内で完了するようにしてください
  3. アニメーションが画面全体に表示される前に完了するよう、早めに（10～20％表示で）トリガーしてください
  4. prefers-reduced-motion の代替動作を用意してください。即時表示にし、視差効果は使いません
  5. モバイルでテストしてください。スクロールアニメーションは60fpsで滑らかに動作する必要があります

コメント

Markdown 対応