【JavaScript&CSS】画面スクロールで特定の領域をフワッと表示させる

Intersection Observer APIを使った実装例とコードを公開します

Intersection Observer APIを使って、画面をスクロールしたときに、特定の要素を下からフワッと表示させる方法を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例

画面を下にスクロールし、特定の領域が50%画面に表示されたとき、その領域が下からフワッと出現します。
表示後は表示されたままになります。スクロールを一番上に戻してからリロード(更新)すると、スクロール時に再びフワッと出現するようになります。

スクロールでこの領域が50%表示されたとき、フワッと表示されます。

(表示後はそのまま)

スクロールでこの領域が50%表示されたとき、フワッと表示されます。

(表示後はそのまま)

スクロールでこの領域が50%表示されたとき、フワッと表示されます。

(表示後はそのまま)

HTML/CSS/JavaScript コード

<div class="space"></div>
<div class="box box-1">
  <p>スクロールでこの領域が50%表示されたとき、フワッと表示されます。</p>
  <p>(表示後はそのまま)</p>
</div>
<div class="space"></div>
<div class="box box-2">
  <p>スクロールでこの領域が50%表示されたとき、フワッと表示されます。</p>
  <p>(表示後はそのまま)</p>
</div>
<div class="space"></div>
<div class="box box-3">
  <p>スクロールでこの領域が50%表示されたとき、フワッと表示されます。</p>
  <p>(表示後はそのまま)</p>
</div>
  • スクロール領域を確保するため、spaceクラスを付けたdiv要素を配置しています。
.space {
  height: 800px;
}

.box {  
  height: 200px;
  line-height: 100px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .5s, transform .5s;
}

.box-1 {
  background: skyblue;
}

.box-2 {
  background: lime;
}

.box-3 {
  background: salmon;
}

.box.appear {
  opacity: 1;
  transform: translateY(0);
}
  • 初期状態では、フワッと表示させる領域は非表示(opacity: 0;)にし、さらに下方向に配置(transform: translateY(50px);)しておく。
  • スクロールで領域が交差したとき、appearクラスを付与してopacity & transformプロパティを0.5秒かけて戻す。これで、appearクラスがついたときに下からフワッと表示して見えるようになる。
// 監視したい要素を取得
const boxes = document.querySelectorAll('.box');

// 要素が交差されたときの処理
const cb = function(entries, obs) {
  entries.forEach(entry => {

    // 要素の交差が終わったときは早期リターン
    if (!entry.isIntersecting) {
      return;
    }
    
    // 要素が50%交差したときにappearクラスを付与
    entry.target.classList.add('appear');

    // 引数に指定した要素の監視を止める
    obs.unobserve(entry.target);  
  });
}

const ops = {
  threshold: .5, // 100%表示されたときに実行される
};

const io = new IntersectionObserver(cb, ops);

// 引数には監視したい要素を渡す
boxes.forEach(box => {
  io.observe(box);
});
  • 「画面をスクロールしたとき、特定の領域が表示されたときに特定の処理をする」という場合は、Intersection Observer APIを使う。
  • 今回の実装例では、スクロールして特定の領域が画面に50%(つまり上半分)表示されたとき、appearクラスを付けるという処理を実行している。

応用例

画像や関連記事もフワッと表示させられます。

大久野島にいるうさぎその3
大久野島のうさぎ
大久野島にいるうさぎその2
大久野島のうさぎ
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次