VanillaなJavaScriptとCSSで要素をフワッと表示させる練習

Document

ふわっと表示するやつ

スクロールして画面内に要素が入ったら表示するやつ

ふわっと表示させたい要素、この場合はimgタグ、にsaってクラス名(Scroll Action)を付けてる。

<img class="sa" src="hoge">

saクラスのopacityをはじめは0にする。後に登場するJavaScriptによってimgタグにshowってクラス名が引っ付いて、opacityが上書きされて1になる。このときtransitionによって、3秒かけて0から1に変化していく。easeって付けると変化の仕方を指数関数的にしてくれて、人間が見た時に自然な感じになる。easeだけではなく、はじめだけゆっくり変化させるease-inとか色々ある。

.sa {
opacity: 0;
transition: opacity 3s ease;
}

.show {
opacity: 1;
transform: none;
}

jsがこんなけで済むの意外だった。もっとごちゃごちゃ書かないといけないと思ってた。最後2行によって、ロードされた時やスクロールが行われた時に、関数saFuncが呼ばれる。saFuncは、指定した要素が画面内に収まった時に、その要素にクラス名showを引っ付けてくれる。

あと、imgタグでdata-sa_delay="200"とかするとディレイタイムが設定できるようにした。

const saElm = document.querySelectorAll(".sa");

const saFunc = () => {
for (let i = 0; i < saElm.length; i++) {
  const delayTime = saElm[i].dataset.sa_delay || 0;
  if (
    window.innerHeight >
    saElm[i].getBoundingClientRect().top +
      saElm[i].getBoundingClientRect().height
  ) {
    setTimeout(() => {
      saElm[i].classList.add("show");
    }, delayTime);
  }
}
};

window.addEventListener("load", saFunc);
window.addEventListener("scroll", saFunc);