スクロールでふわっと表示する

この章の最後は、スクロールして要素が画面に入ったときに、ふわっと表示する演出です。企業サイトやポートフォリオでとてもよく使われています。動きはCSSで作り、「画面に入ったか」の判定だけJavaScriptに任せます。JavaScriptは数行だけなので、まだ慣れていなくても大丈夫です。

しくみ：クラスをつけたら表示する

この演出は、役割を2つに分けると簡単になります。

• CSS：最初は透明で少し下にある。is-show クラスがついたら、元の位置に表示する（transitionでなめらかに）
• JavaScript：要素が画面に入ったら、is-show クラスをつける

つまり、動きそのものは前のレッスンまでに覚えたCSSだけで作れます。

手順1：HTMLに目印のクラスをつける

<section class="fadein">
  <h2>私たちについて</h2>
  <p>……</p>
</section>

<section class="fadein">
  <h2>サービス</h2>
  <p>……</p>
</section>

手順2：CSSで「最初」と「表示後」を書く

/* 最初：透明で、30px下にある */
.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* is-show がついたら：見えて、元の位置へ */
.fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}

【ポイント】まずはCSSだけで動きを確かめる
ブラウザの検証ツールで、要素に手で is-show クラスを足してみましょう。ふわっと出てくれば、CSSは完成です。うまく動かないときに、CSSとJavaScriptのどちらが原因か切り分けられます。

手順3：JavaScriptで「画面に入ったか」を判定する

IntersectionObserver（インターセクション・オブザーバー）は、「要素が画面に入ったか」を見張ってくれるしくみです。</body> の直前に次のコードを書きます。

<script>
// 見張り役を作る
const observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {               // 画面に入ったら
      entry.target.classList.add('is-show');  // is-show をつける
      observer.unobserve(entry.target);       // 1回出たら見張りをやめる
    }
  });
}, {
  threshold: 0.3   // 要素の30%が見えたら
});

// .fadein を全部見張る
document.querySelectorAll('.fadein').forEach(function (el) {
  observer.observe(el);
});
</script>

threshold（しきい値）の意味

threshold: 0.3 は「要素の30%が見えたら」という意味です。0 にすると少しでも見えた瞬間、1 にすると全部見えてから表示されます。0.2〜0.3くらいが自然です。

unobserveで「1回だけ」にする

unobserve を書かないと、上にスクロールして戻ったときにも反応します。何度もふわふわ動くと読みにくいので、表示は1回だけにするのがおすすめです。

アレンジ：出てくる向きを変える

transform の最初の値を変えるだけで、出てくる向きが変わります。

.fadein-left  { transform: translateX(-40px); }  /* 左から */
.fadein-right { transform: translateX(40px); }   /* 右から */
.fadein-zoom  { transform: scale(0.9); }         /* 小さい状態から */

注意すること

• 大事な情報（料金や問い合わせボタンなど）は、演出なしで最初から見えるようにしておく
• ページ内のすべてに演出をつけると、かえって読みにくい。見出しや区切りなど、ここぞという所だけに
• 前のレッスンの prefers-reduced-motion も一緒に入れておく

まとめ

• 動きはCSS（最初の状態と、is-show の状態）
• 判定はJavaScript（IntersectionObserverでクラスをつける）
• threshold で表示のタイミング、unobserve で1回だけ
• 演出は「ここぞ」という所だけに

これで「CSSアニメーション」の章は終わりです。次の章では、JavaScriptを使った演出としてスライダーを作ります。