スクロール連動アニメーションをCSSで実現する方法

スクロール連動アニメーションをCSSで実現する方法

近年のWebデザインでは、スクロールに合わせて要素が動く「スクロール連動アニメーション」がよく使われています。
視線誘導やコンテンツの強調に効果的で、モダンなサイト演出には欠かせないテクニックです。

この記事では、JavaScriptを使わずにCSSで実現できるスクロールアニメーションを中心に、実用的な実装方法を紹介します。
基本的なフェードインから、少し高度なスクロールトリガーまで解説します。

スクロール連動アニメーションとは

スクロール連動アニメーションとは、ページをスクロールしたタイミングで要素が表示されたり動いたりする演出です。

  • 要素が下からフェードイン
  • 画像がスライド表示
  • テキストが順番に表示
  • パララックス効果

ユーザーの視線誘導やコンテンツの印象強化に使われることが多い表現です。

方法① CSS + Intersection Observer（実用的な方法）

完全なCSSのみのスクロールトリガーはブラウザ対応の問題があるため、実務ではIntersection Observerを使う方法が最も一般的です。

HTML

HTML
<section class="fade-item">コンテンツ1</section>
<section class="fade-item">コンテンツ2</section>
<section class="fade-item">コンテンツ3</section>

CSS

CSS
.fade-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}

.fade-item.is-show {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

JavaScript
const items = document.querySelectorAll('.fade-item');

const observer = new IntersectionObserver((entries)=>{
  entries.forEach(entry=>{
    if(entry.isIntersecting){
      entry.target.classList.add('is-show');
    }
  });
});

items.forEach(item=>{
  observer.observe(item);
});

この方法は軽量でパフォーマンスも良く、多くのサイトで採用されています。

コンテンツ1
コンテンツ2
コンテンツ3

方法② CSS Scroll-driven Animations（新しい仕様）

最新のCSSでは、Scroll-driven Animationsという仕組みが登場しています。 これにより、スクロールに合わせたアニメーションをCSSのみで制御できます。

CSS例

CSS
.box {
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
  
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

スクロール位置に応じてアニメーションが再生されます。

ポイント

  • JavaScript不要
  • スクロール量とアニメーションが同期
  • 今後の主流になる可能性が高い

ただし、ブラウザ対応はまだ限定的なため注意が必要です。

実践サンプル：フェードアップアニメーション

HTML

HTML
<div class="fadeup">
  スクロールで表示されるコンテンツ
</div>

CSS

CSS
.fadeup {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .7s, transform .7s;
}

.fadeup.show {
  opacity: 1;
  transform: translateY(0);
}

このフェードアップ演出は、多くの企業サイトやLPで使われる定番パターンです。

パフォーマンス最適化のポイント

スクロールアニメーションは多用するとパフォーマンスに影響することがあります。 以下の点に注意しましょう。

  • アニメーション対象を増やしすぎない
  • transformとopacityを中心に使う
  • 重いbox-shadowやfilterを多用しない
  • Intersection Observerを利用する

アクセシビリティ対応（prefers-reduced-motion）

ユーザーの中にはアニメーションを不快に感じる人もいるため、 prefers-reduced-motion に対応することが重要です。

CSS
@media (prefers-reduced-motion: reduce) {
  .fade-item {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

この設定により、ユーザーが「動きを減らす」設定をしている場合はアニメーションを無効化できます。

まとめ

スクロール連動アニメーションは、Webサイトの表現力を高める重要なテクニックです。

  • 実務ではIntersection Observerが主流
  • CSS Scroll Animationsは今後注目の技術
  • パフォーマンスとアクセシビリティを意識する

適切に使えば、ユーザー体験を大きく向上させることができます。

関連記事

PAGE TOP