スクロールで要素をふわっと表示する方法（IntersectionObserver入門）

スクロールしていくと、写真や文章が下からふわっと現れる——おしゃれなサイトでよく見る、あの演出を作ります。むずかしそうに見えますが、仕組みは前回のいいねボタンと同じ。「きっかけが来たらクラスを付ける」だけです。ちがうのは、きっかけがクリックではなく画面に入ったことだという点だけ。

CSS側：現れる前と後を用意する

まず、現れる前（透明で少し下にいる）と現れた後（ふつうの位置）をCSSで用意します。

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

opacity: 0で透明に、translateY(24px)で24pxだけ下にずらしておく。.is-visibleが付いたら両方を元に戻す——transitionがあるので、その戻りが「ふわっ」になります。

JS側：画面に入ったのを見張る

「要素が画面に入ったか」を見張ってくれる専用の道具が、ブラウザに用意されています。それがIntersectionObserver（インターセクション・オブザーバー＝交差の見張り番）です。

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

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

長く見えますが、読み下すとこうです。

部分	意味
`new IntersectionObserver(...)`	見張り番を1人やとう
`entry.isIntersecting`	「いま画面に入ってる？」（if文で判定）
`entry.target.classList.add(...)`	入っていたら、その要素にクラスを付ける
`observer.observe(el)`	「この要素を見張ってて」とお願いする

最後の行のquerySelectorAllは、querySelectorの全部つかまえる版。.revealが付いた要素をまとめてつかまえ、1つずつ見張り番に登録しています。

動きを見てみよう

画面に入った要素から順にクラスが付き、ふわっと現れます。一度現れたものはそのまま——クラスをadd（付けるだけ）にしているからです。

このレッスンのまとめ

スクロール演出も正体は「画面に入ったらクラスを付ける」——いいねボタンと同じ役割分担
見張り番はIntersectionObserver。observe()で要素を登録し、isIntersectingで判定する
一度だけ現れっぱなしにするなら、classList.add（付けるだけ）を使う

動きの道具はこれでひと通りそろいました。次回は締めくくりとして、その動きを苦手な人にもやさしく届ける工夫を覚えます。