スキルアップを始める

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

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

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

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;
}

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

まとめ

classNameToAddで指定したクラスを、画像要素のうち閾値を超えて表示された要素に対して追加するようになっています。

閾値を超えた場合にクラスを追加することで、画像要素がフェードインするようなアニメーションを実現することができます。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら