スクロール画面内に入ったらアニメーションさせる[たった13行で実装]

2020/05/31

web

「画面の中に入ったら画像を表示したい」
「スクロール量によって表示を切り替えたい」

この記事はそんな方に向けて書いています。

どうもー。web 業界 10 年、フロントエンドメイン担当のガッチ（@gatchsite）です。

最近のサイトは、スクロールしていくと画像がフワッと表示されたり、テキストもスクロール量に合わせてフェードインしてきたり。

アニメーションありのサイトが当たり前になってきましたね。

そこで今回は、「Intersection Observer API」を使った実装方法を紹介したいと思います。

記事の内容はこちら

画面に表示されたことを判定する。

画面内に入ったかどうかを判定するには、Javascript を使う必要がります。最近は「脱 JQuery」の動きが多いですが、もちろん JQuery を使って判定することもできます。

スクロール量を計算して実装する

従来のやり方がこちらです。 scroll イベントをイベントリスナーに登録し、window のスクロール量と表示させたいコンテンツの Y 座標を判定します。スクロール量が y 座標を上回った時に画面内に入っていると判断しクラスを追加するなりして表示アニメーションを実行していました。

window.addEventListener('scroll', function (e) {
  var srollY = window.pageYOffset
  var target = document.querySelector('#target')
  if (srollY > target.position) {
    //ココで実行させる
  }
})

この方法では、画面の高さも重要になりまして、実際はしたのコードのような実装方法で使っていたのではないでしょうか。


window.addEventListener("scroll", function(e){
  var srollY = window.pageYOffset;
  var height = window.innerHeight;
  var offset = 10px; // 画面内に入ってからの距離
  var target = document.querySelector("#target")
  if (srollY + height - offset > target.position) {
    //ココで実行させる
  }
});

画面の高さを取得してスクロール量にプラスすることで、画面の一番下の座標を求めてから、画面に少し入ってからアニメーションさせたいので、オフセットを追加する。

今まで通りのやり方でも可能ですが、計算せずに実装できたら簡単かと思います。

「Intersection Observer API」を使って実装する

「Intersection Observer API は要素の交差したイベントを発火してくれるため、そのイベントを検知するだけでよくなります。

ほぼ全てのブラウザで使用できるため、特に気にせず実装できます。

参考：「Can I use」

以下の例は、ビューポート（ブラウザ）内に要素が入ってきたら、isViewをいうクラスを追加するサンプルです。

// 交差したら実行したい処理
let callback = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.classList.add('isView')
  })
}
// 交差する際のoption
let options = {
  root: null, // window全体との交際
  rootMargin: '0px',
  threshold: 1.0,
}
let observer = new IntersectionObserver(callback, options)
var target = document.querySelector('#listItem')
observer.observe(target)