JavaScriptライブラリを使わずに【scrollReveal】ふわっと表示させる

2021年3月2日2021年3月26日JavaScript

JavaScriptのIntersectionObserverAPIを使って、ライブラリを使わずにscrollRevealのようなふわっと表示させる方法を紹介します。

IntersectionObserverAPIでふわっと表示させる

どこでも使えますが、今回はセクションとしましょう。

CSS

.section {
  padding: 15rem 3rem;
  border-top: 1px solid #ddd;

  transition: transform 1s, opacity 1s;
}

.section--hidden {
  opacity: 0;
  transform: translateY(8rem);
}

JavaScript

//sectionをすべて取得
const allSections = document.querySelectorAll('.section');

//コールバック関数
const revealSection = function (entries, observer) {
  //分割代入 (Destructuring assignment)で取り出す。
  const [entry] = entries;
  console.log(entry); //entry.targetが各sectionを表しています。

  //Guard clause(Guard Clause ガード節,ガード条件)
  //sectionが交差しなければreturnして処理を終わらせ、交差したらhiddenを取り除きます。
  if(!entry.isIntersecting) return;
  entry.target.classList.remove('section--hidden');


  //unobserve()で止めます。
  observer.unobserve(entry.target);
};

//IntersectionObserverを定義
const sectionObserver = new IntersectionObserver(revealSection, {
  root: null,
  threshold: 0.1, //10%
});

//sectionにそれぞれhiddenをつける
allSections.forEach(function (section) {
  sectionObserver.observe(section);
  section.classList.add('section--hidden');
});

ターゲットの選択

まず、querySelectorAll()でスクロールで表示させたい要素をすべて選択します。

hiddenをつけてすべて非表示にする

そして、forEachでそれぞれにhiddenのクラスをつけて、すべてをいったん非表示にします。
HTMLに手動でhiddenをつけるとJavaScriptをオフにしているブラウザではコンテンツが表示されなくなってしまうのでJavaScriptでhiddenにします。

IntersectionObserverを設定する

そして、スクロールすると、それぞれのところで表示できるようにIntersectionObserverを設定します。

IntersectionObserverのオプション部分ではroot: nullとすることでビューポートでターゲットを観測できます。
thresholdは微調整をしながら、確認していきます。今回は10%とします。

コールバック関数を設定する

そして、IntersectionObserverで呼び出すコールバック関数を設定します。
コールバック関数の引数の名前はentries, observerでなくてもいいのですが、これらの名前で使われることが多いです。
entriesの中身は、thresholdでひとつしかありませんが、配列になっているので、分割代入でentryに格納します。
スクロールして出力されるIntersectionObserverEntryのtargetを確認するとsection1などが表示されることが確認できます。
つまり、entry.targetが各sectionを表しています。

表示にする条件を設定する

sectionが交差しなければreturnして処理を終わらせ、交差したらhiddenを取り除きます。
sectionが交差したらhiddenを取り除くとする下のif文でも動きます。

  if(entry.isIntersecting) 
  entry.target.classList.remove('section--hidden');

unobserve()で観測を止める

スクロールをするたびにobserveされますが、一度表れたら不要になるのでobserveを止めます。
unobserve()で止められます。()には、targetとなる要素、今回の場合はsection(つまりentry.target)をいれます。