JavaScript Academy · レッスン

スクロールで発火するアニメーション

Q: 「スクロールで発火するアニメーション」で何を学びますか？

要素が表示範囲に入ったときにアニメーションさせます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

要素が表示範囲に入ったときにアニメーションさせます。

「スクロールで発火するアニメーション」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

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

よくある効果の1つは、ユーザーが要素までスクロールしたときに、その要素をフェードインまたはスライドインさせることです。Intersection Observer を使うと、処理をきれいに実装できます。要素がビューポートに入ったら CSS クラスを追加し、アニメーションは CSS に任せます。

CSS 側の処理

CSS で非表示の開始状態と表示された終了状態を定義します。JavaScript はクラスを切り替えるだけで、トランジションは純粋な CSS で処理するため、滑らかに動作します。

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

対象の選択

アニメーションさせたい要素に共通のクラスを付け、その要素を集めます。

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

オブザーバーの作成

意味のある範囲が表示されたときにアニメーションを開始できるように、1ピクセルだけではなく適切なしきい値を使用します。

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

クラスの追加

コールバック内で、交差した対象に visible クラスを追加します。すると CSS が対象を画面内へアニメーションさせます。

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

1回だけアニメーションさせる

1回限りの表示アニメーションにするには、クラスを追加した後で要素の監視を停止します。これにより、スクロールで画面外に出てから戻ってきても再びアニメーションしません。

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

双方向の再アニメーション

要素が画面外に出るときにもアニメーションさせたい場合は、isIntersecting に基づいてクラスを切り替え、監視を続けます。

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

監視の開始

各対象を監視して追跡を開始します。ユーザーがスクロールして各要素を通過すると、オブザーバーが呼び出されます。

items.forEach(el => observer.observe(el));

アニメーションの段階的表示

トランジションの遅延時間を段階的に増やすと、連続的な表示効果を作れます。遅延時間はデータ属性や要素のインデックスから設定できます。

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

モーション軽減への配慮

モーションを減らした表示を好むユーザーもいます。メディアクエリを確認し、そのユーザーに対してはアニメーションを省略してコンテンツをすぐに表示します。

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

パフォーマンス上の利点

負荷の大きい処理は CSS トランジションが担い、可視性の検出はブラウザに任せるため、多数の要素があってもスクロールアニメーションは滑らかです。スクロールイベントの計算も、カクつきもありません。

確認問題

スクロールをトリガーにしたアニメーションについての理解度を確認します。

まとめ

スクロールをトリガーにしたアニメーションを実装しました。

CSS で非表示状態と表示状態を定義します。
適切な threshold で対象を監視します。
交差したらクラスを切り替え、アニメーションは CSS に任せます。
1回限りの表示には unobserve を使います。
prefers-reduced-motion に配慮します。

Intersection Observer はこれで完了です。次は Web Workers です。

よくある質問

「スクロールで発火するアニメーション」レッスンは無料ですか？

はい。「スクロールで発火するアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「スクロールで発火するアニメーション」で何を学びますか？

要素が表示範囲に入ったときにアニメーションさせます。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「スクロールで発火するアニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る