スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】

2025年6月11日

スクロールでふわっと表示されるアニメーションの実装方法【初心者向け・コピペOK】

Webサイトをおしゃれに見せたい！そんなときに使えるのが「スクロールでふわっと表示されるアニメーション」です。

この投稿では、初心者の方でも理解できるように、HTML・CSS・JavaScriptを使った方法を丁寧に解説します。WordPressにもそのまま使えるコピペコード付きです。

🎬 スクロールでふわっと表示とは？

ユーザーがページをスクロールしたときに、まだ見えていなかった要素（画像やテキストなど）が、自然にふわっと現れる動きのことです。

視覚的にインパクトがあり、サイト全体が洗練された印象になります。

🧩 使用する技術

HTML： 表示する要素を記述
CSS： アニメーションの見た目を設定
JavaScript： スクロールで表示領域に入ったことを検知

🛠️ ステップごとの説明

① HTML：表示するコンテンツ

<div class="fade-in-section">
  <h2>見出しタイトル</h2>
  <p>これはスクロールで表示される内容です。</p>
</div>

このように、fade-in-section クラスを付けた要素がアニメーションの対象になります。

② CSS：ふわっと動くスタイル

.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

③ JavaScript：スクロールで検知して表示

document.addEventListener("DOMContentLoaded", function () {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
      }
    });
  });

  document.querySelectorAll('.fade-in-section').forEach((el) => {
    observer.observe(el);
  });
});