スクロール連動アニメーションのセットアップ
要素がビューポートに入ったときにCSSアニメーションを開始します
「スクロール連動アニメーションのセットアップ」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
目的
スクロール連動アニメーションは、要素の表示状態に応じて再生、一時停止、逆再生を行います。たとえば、セクションが表示範囲に入ったときのヒーローのフェードイン、表示されたときにカウントアップする数値、スクロール位置に連動するパララックス効果などがあります。IntersectionObserverがアニメーションをトリガーし、CSSまたはWeb Animations APIが実行します。
トリガーベースのアニメーション
最も単純なパターンは、要素がビューポートに入ったときに、アニメーションを含むCSSクラスを追加する方法です。オブザーバーのコールバックでentry.target.classList.add("in-view")を実行し、そのクラスでanimation: fade-in 600ms forwardsを定義します。
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}オブザーバーの設定
共有オブザーバーを作成し、トリガークラスを持つすべての要素を監視します。交差したら「in-view」を追加し、再トリガーを防ぐために監視を解除します。1回だけ実行するアニメーションならこれで十分です。再入場時に繰り返す場合は監視を解除せず、表示範囲から出たときにクラスを削除します。
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));スタガー効果
リストを順番に表示するには、CSSカスタムプロパティで項目ごとの遅延を設定します。各項目にstyle="--delay: ${i * 100}ms"を指定し、アニメーション側でanimation-delay: var(--delay)を読み取ります。リストが表示範囲に入ると、項目が連鎖的にアニメーションします。
早めにトリガーするためのthreshold
threshold: 0.2は要素の20%が表示されたときに発火し、通常は「in-view」アニメーションに適したタイミングです。threshold: 0は早すぎて（1ピクセルでも表示されると発火するため）動きが唐突に見えます。threshold: 1は遅すぎて（完全に表示されてから発火するため）遅延しているように感じられます。
スクロール連動とスクロールトリガー
スクロールトリガー型アニメーションは、交差したときに1回再生します（前述）。スクロール連動型アニメーションは、スクロール位置に合わせて進行します。現在の方法はCSSのスクロール駆動アニメーション（animation-timeline: scroll()）であり、IntersectionObserverはトリガー領域への進入・退出の検出に引き続き役立ちます。
レイアウトスラッシングの回避
GPUで低コストに変換できるプロパティであるtransformとopacityをアニメーションさせます。top、left、width、heightのアニメーションは避けてください。これらはフレームごとにレイアウトを発生させるため、中程度の性能のデバイスではスクロール連動アニメーションがカクつきます。
Reduced Motionへの配慮
アニメーションの宣言を@media (prefers-reduced-motion: no-preference)で囲むと、動きを減らしたいユーザー（前庭障害や動きへの過敏さがあるユーザー）には、動きのない静的な最終状態を表示できます。装飾的なアニメーションは、動きを減らす設定では完全に無効にしてください。
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}パフォーマンスのパターン
要素ごとに1つずつではなく、共有オブザーバーを1つ使用します。1回だけ実行するアニメーションが発火したら、監視を解除します。will-changeは控えめに使用し、現在アニメーションしている要素にだけ設定して、アニメーション終了時に削除します。Performanceパネルでフレーム落ちを確認してください。
双方向アニメーション
要素がビューポートから出たときに逆再生するアニメーションでは、監視を解除しません。コールバックでisIntersectingに基づいてクラスを切り替えます。entry.target.classList.toggle("in-view", entry.isIntersecting)により、進入時には正方向に、退出時には逆方向にアニメーションします。
Web Animations APIとの組み合わせ
JavaScriptでアニメーションを制御する場合は、classList.addをentry.target.animate(keyframes, options)に置き換えます。WAAPIはAnimationオブジェクトを返すため、一時停止、逆再生、またはプロミスによる連結が可能です。複雑なシーケンスではCSSより柔軟に扱えます。
知識チェック
スクロール連動アニメーションで、top/left/width/heightではなくtransformとopacityをアニメーションさせるのが推奨されるのはなぜですか？
要約
スクロール連動アニメーションでは、IntersectionObserverをCSSアニメーションのクラスまたはWAAPIと組み合わせます。非表示状態を設定し、交差したら「in-view」を追加します。top/leftではなくtransformとopacityをアニメーションさせ、prefers-reduced-motionに配慮します。CSSカスタムプロパティで遅延を設定すると、連続的な表示効果を作れます。スクロールの進行度全体に連動するアニメーションには、ネイティブのスクロール駆動アニメーション（animation-timeline: scroll()）を検討してください。
よくある質問
「スクロール連動アニメーションのセットアップ」レッスンは無料ですか？
はい。「スクロール連動アニメーションのセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「スクロール連動アニメーションのセットアップ」で何を学びますか？
要素がビューポートに入ったときにCSSアニメーションを開始します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「スクロール連動アニメーションのセットアップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- IntersectionObserver APIとしきい値
- IntersectionObserverによる遅延読み込み
- 無限スクロールの実装
- スクロール連動アニメーションのセットアップ