![[JavaScript] スクロールで要素が表示されたらクラス名を付与する方法](https://images.microcms-assets.io/assets/abf038dca2a24f0eb671544430f30ca4/3c9420f6975d453aa8556079f08e7b8d/scroll-add-class.webp)
リッチな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で要素が交差したかどうかの条件分岐が可能です。
最後に
以上で終了です。
スクロールでのクラス付与はとても使用しますので、是非参考にしてください。
記事の内容を自社サイトで活かしたい方へ
SEO・導線設計・サイト改善など、今の状況に合わせて優先すべき改善点を整理します。相談内容が固まっていない段階でもお気軽にご相談ください。
アーツビーについて
もっと知りたい方へ
What’s Artsbe お問い合わせ
Webサイトの新規制作・リニューアル、SEOや集客導線の見直しまで、現状の課題に合わせてご相談いただけます。
相談内容が固まっていない段階でも、必要な施策や進め方を一緒に整理します。