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

JavaScript(ジャバスクリプト)

2023.06.25

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

scrollイベントを取得
CSSクラスを指定する
まとめ

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でアニメーションを設定することができます。

CSSクラスを指定する

追加されたクラス名を CSS で指定することで、画面内に表示された要素に対してアニメーションを設定することができます。

例えば、以下のような CSS コードを指定することで、要素がスクロールに合わせてフェードインするアニメーションを実装することができます。

[rml_read_more]

.scroll-animation {
opacity: 0;
}

.scroll-animation.is-show {
opacity: 1;
transition: opacity 3s ease, transform 0.8s ease;
}

下から飛び出すように表示させたい場合は、translateYを使って以下のように指定します。

.scroll-animation {
opacity: 0;
transform: translateY(50px);
}

.scroll-animation.is-show {
opacity: 1;
transform: translateY(0);
transition: opacity 3s ease, transform 0.8s ease;
}

これにより、下から画像が飛び出すように次々に表示されます。