【JavaScript】画面をスクロールしたら画像をふわっと表示する

画面スクロールイベントが発生したら特定の要素にクラスを追加して、スクロールしたら画像をふわっと表示させる方法です。

目次

1. scrollイベントを取得

2. CSSクラスを指定する

3. まとめ

scrollイベントを取得

このコードは、特定のクラス名（ここでは ‘wp-block-image’）が付いたすべての要素を取得し、画面内に表示された時に指定したクラス名を追加するように設定しています。

const threshold = 0.5;
const imageElements = document.getElementsByClassName('wp-block-image');
// 追加するクラス名を定義する
const classNameToAdd = 'is-show';
console.log("imageElements :", imageElements);

window.addEventListener('scroll', () => {
  const windowHeight = window.innerHeight;
  const thresholdPixel = windowHeight * threshold;
  for (let i = 0; i < imageElements.length; i++) {
    const imageTop = imageElements[i].getBoundingClientRect().top;
console.log("imageTop :",i+":"+imageTop);
    if (imageTop < thresholdPixel) {
      imageElements[i].classList.add(classNameToAdd);
    }
  }
});

classListプロパティは、DOM要素に対してクラス名を操作するためのプロパティです。クラス名の追加、削除、切り替えなどができます。

add()メソッドは、指定したクラス名を要素に追加するメソッドです。

スクロールイベントが発生した際に、画面内に表示されている要素の上端が閾値（ここでは画面高さの半分）を超えた場合、その要素に対して指定したクラス名を追加しています。

このクラス名を要素に追加することで、CSSでアニメーションを設定することができます。

続きはこちら
https://eguweb.jp/javascript/64854/