スクロール時にふわっと左下右からフェードインさせる方法

スクロールして要素が画面に入ったときに、
それぞれが 左・下・右 から柔らかくスライド＆フェードインする動きを作ります。

今回使うのは Intersection Observer（ブラウザ標準API）。
jQuery不要で、軽量・高速です。

---

実装イメージ

スクロールすると…

• 左からスッと登場「WordPress」
• 下からふわっと出てくる「CSS」
• 右からスライドインする「JavaScript」

という順番で自然にフェードインします。

WordPress

CSS

JavaScript

---

HTML

<section class="container">
  <div class="element1">
    <img src="./imgs/WordPressアイコン.png" alt="WordPressアイコン">
    <h3>WordPress</h3>
    <p>CMSシェアNo.1</p>
  </div>

  <div class="element2">
    <img src="./imgs/cssアイコン.png" alt="cssアイコン">
    <h3>CSS</h3>
    <p>好みのレイアウトに。</p>
  </div>

  <div class="element3">
    <img src="./imgs/jsアイコン.png" alt="jsアイコン">
    <h3>JavaScript</h3>
    <p>より豊かな表現を。</p>
  </div>
</section>

---

CSS

/* コンテナ全体 */
.container {
  display: flex;
  flex-wrap: nowrap;
  gap: 21px;
  justify-content: center;
  align-items: center;
}
.container img {
  width: 210px;
}

/* 各要素（共通） */
.element1, .element2, .element3 {
  margin: 12px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  opacity: 0; /* 初期は非表示 */
  transition: all 0.6s ease-out;
}

/* 初期位置の設定 */
.element1 {
  transform: translateX(-100%); /* 左から登場 */
}
.element2 {
  transform: translateY(100%);  /* 下から登場 */
}
.element3 {
  transform: translateX(100%);  /* 右から登場 */
}

---

JavaScript（Intersection Observer）

document.addEventListener('DOMContentLoaded', function() {
  const options = {
    threshold: 0.1 // 要素の10%が見えた時に実行
  };

  const observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translate(0, 0)';
        observer.unobserve(entry.target); // 一度だけ実行
      }
    });
  }, options);

  document.querySelectorAll('.element1, .element2, .element3')
    .forEach(el => observer.observe(el));
});

---

解説：Intersection Observerとは？

Intersection Observer は
「要素が画面内に入った瞬間」を検知できるブラウザ標準APIです。

アニメの基本的な流れは次の通りです。

• 監視対象を登録：observer.observe(el)
• 画面に入ると実行：entry.isIntersecting が true
• opacity + transform で自然な動き
• unobserve() で1度だけアニメーションを実行

---

threshold の意味

threshold: 0.1

これは
「要素の10%が見えた瞬間にアニメ開始」
という意味です。

値を大きくすると、よりしっかり見えた状態で発火します。

---

応用アイデア

応用例	使い方
.element4 を追加	斜め上からフェードインなど
transform: scale(0.8) → 1	拡大しながら登場
opacity のみ	シンプルフェード
unobserve() を外す	通るたびに毎回アニメ

---

まとめ

ポイント	内容
Intersection Observer	スクロール検知が軽量＆高速
transform + opacity	スライド × フェードが定番
threshold	登場のタイミングを調整
unobserve()	アニメを1回だけ実行

スクロールに合わせて自然にふわっと動かしたいとき、
最も軽量で扱いやすい実装方法です。