ロゴ Artsbe

BLOG

[JavaScript] スクロールで要素が表示されたらクラス名を付与する方法

JavaScript

リッチなWebサイトにするためにJavaScriptは必要不可欠です。

特にスクロールに合わせたアニメーションやエフェクトには必須です。

今回はIntersection Observerというのを使用し、スクロールで要素が画面内に入ったら任意のクラス名を付与する方法をご紹介いたします。

目次

デモ

まずはデモを作成したので下記リンクよりご確認ください。

スクロールでクラスを付与しアニメーションさせています。

デモ

JavaScriptのコード

まずJavaScriptのコードからです。

const target = document.querySelectorAll('.js-target');

//オプション設定
const options = {
  root: null,
  rootMargin: '-20% 0px',
  threshold: 0,
};

//Intersection Observerの呼び出し
const observer = new IntersectionObserver(callback, options);
target.forEach((tgt) => {
  observer.observe(tgt);
});

//要素が交差したときの指示
function callback(entries) {
  entries.forEach((entry) => {
    const target = entry.target;
    if (entry.isIntersecting) {
      target.classList.add('is-active');
    }
  });
}

コード解説

対象の要素を取得

まず、const targetでアニメーションさせる要素を全て取得します。

const target = document.querySelectorAll('.js-target');

オプション設定

次にオプション設定をします。

const options = {
  root: null,
  rootMargin: '-20% 0px',
  threshold: 0,
};

root
交差する基準の要素を指定します。
nullの場合は記載しなくても大丈夫です。デフォルトはブラウザのビューポートとなります。

rootMargin
基準となるrootからの位置を指定します。マイナスだと内側になります。
指定方法はpxか%となり、CSSのmarginと同じように指定できます。

threshold
要素が交差位置に入ってからどのくらい見えたら発火するかを指定します。
デフォルトは0で、要素が交差位置に入ると発火します。
指定方法は0.5 , 1 のように指定し、0.5は50％。1は100%となります。

InterSectionObserverの呼び出し

次にInterSectionObserverを呼び出します。

const observer = new IntersectionObserver(callback, options);

第一引数に実行したい関数。第二引数にオプションを記載します。

今回は複数の要素を個別に画面内に入ったらクラス名を付けるので、下記のようにforEachを使用し、個別に実行されるようにしています。

target.forEach((tgt) => {
  observer.observe(tgt); //どの要素を対象にするか指定します。
});

実行時の処理

最後に実行時の処理を記述します。

function callback(entries) {
  entries.forEach((entry) => {
    const target = entry.target;
    if (entry.isIntersecting) {
      target.classList.add('is-active');
    }
  });
}

こちらもforEachそれぞれ処理をさせます。

if文の.isIntersectingで要素が交差したかどうかの条件分岐が可能です。

最後に

以上で終了です。

スクロールでのクラス付与はとても使用しますので、是非参考にしてください。

Twitter Facebook
INDEX