トップへ戻る
BLOGS

JS スクロールしたらフワッとコンテンツが現れるやつ(javascript実装編)

JS スクロールしたらフワッとコンテンツが現れるやつ(javascript実装編)

最近よく見かける画面をスクロールして一定量進むとフワッとコンテンツが出てくるやつを実装したいと思います。

前回の続きでひな形となるHTML、CSSを準備したので

今回それをJSでコントロールしていく感じになります。

まずは

コンテンツのリストとなるHTMLを取得します。

const targetElement = document.querySelectorAll(".animationTarget");

はい

これでコンテンツのリストとなっているliタグを配列として取得できました。

配列ということで最近おなじみのfor文で取り出そうとするわけですが

今回の概要、考え方としまして

  • 要素の上からの距離を取得する
  • 要素自身の高さを取得する
  • 現在のスクロール量を計測する
  • 上記の項目を比較しながら要素が現在視認できるかどうかを判定する

といった考え方で進めていきます。

まずは

要素の上からの距離を取得する

for (let i = 0; i < targetElement.length; i++) {
  const getElementDistance = targetElement[i].
  getBoundingClientRect().top;
}

ここで見慣れないオブジェクト

targetElement[i].getBoundingClientRect().top;

これは現在のその要素の画面最上部からの距離を求めてくれる関数になります。

それをforループで回してあげて四箇所すべての距離を取得できました。

画面をスクロールしたら、、の処理を書く

document.addEventListener("scroll",function() {
  for (let i = 0; i < targetElement.length; i++) {
    const getElementDistance = targetElement[i].
    getBoundingClientRect().top;
  }
})

全体をaddEventListenerで囲ってやることで

スクロールイベントにすることが出来ます。

window.innerHeight

window.innerHeightは画面の高さを取得してこれます。

これを一旦コンソルにだしてみてみると441と出ていました。

さらに先程取得した

getElementDistanceif文で一つだけ出力してみてみます

if (i === 1) {
      console.log(getElementDistance);
    }

この状態でコンソルで確認してみると

getElementDistanceの数値が画面の高さを超えたくらいから要素の頭が見えてくるのが確認できます。

ということは

画面の高さより、画面上部までの距離が少なくなったら

という条件分岐で処理を書くことができそうです。

if文

if (window.innerHeight > getElementDistance) {
      targetElement[i].classList.add("show");
    }

こうですね

処理の内容としては“show”というクラスを付与するようにします。

しかしこれでは見えたか見えてないかのギリギリでの処理になってしまうため

うまくアニメーションが見えてくれるかどうか、、、

そこで要素自身の高さを出して足してあげます

.clientHeight

.clientHeightは要素の高さを取得してこれます

なので

 console.log(targetElement[i].clientHeight * .6);

これで要素自身の高さの0.6倍を確認できます。

これで先に作成した

const getElementDistance = targetElement[i].
getBoundingClientRect().top;

に足してあげます

完成したコードがこちら

const targetElement = document.querySelectorAll(".animationTarget");
document.addEventListener("scroll",function() {
  for (let i = 0; i < targetElement.length; i++) {
    const getElementDistance = targetElement[i].getBoundingClientRect().top + targetElement[i].clientHeight * .6;
    if (window.innerHeight > getElementDistance) {
      targetElement[i].classList.add("show");
    }
  }
})

後はCSSでアニメーションを書いていきます

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA