【JavaScript】人の目を引きつけるスクロールアニメーションを実装

<div class="container">
  <div class="box">スクロールする要素1</div>
  <div class="box">スクロールする要素2</div>
  <div class="box">スクロールする要素3</div>
</div>

UIHACK 編集長

解説

このHTMLコードでは、.containerクラスの要素内に、スクロールする要素として3つの.boxクラスの要素が含まれています。これらの要素はスクロールイベントに応じて表示制御が行われます。

.container {
  height: 2000px; /* スクロールするための高さを設定 */
  padding-top: 800px; /* テスト用のスペースを追加 */
}

.box {
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.box.show {
  opacity: 1;
}

UIHACK 編集長

解説

このCSSコードでは、.containerクラスの要素の高さが2000ピクセルに設定され、スクロールが可能になるようになっています。.boxクラスの要素は初めは透明（opacity: 0）になっており、.box.showクラスが追加されることで不透明（opacity: 1）になり、表示されるようになります。また、transitionプロパティを使用して、要素の不透明度の変化が0.5秒かけて行われるように設定されています。

const boxes = document.querySelectorAll(".box");
let timeout;

window.addEventListener("scroll", () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    const triggerBottom = (window.innerHeight / 5) * 4;

    boxes.forEach((box) => {
      const boxTop = box.getBoundingClientRect().top;

      if (boxTop < triggerBottom) {
        box.classList.add("show");
      } else {
        box.classList.remove("show");
      }
    });
  }, 100); // スクロールイベントの発火を100ミリ秒遅延させる
});

UIHACK 編集長

解説

このJavaScriptコードでは、.boxクラスの要素を取得し、スクロールイベントを監視します。スクロールイベントが発生するたびに、指定の処理が実行されます。具体的には、triggerBottom変数を計算し、各.box要素の位置を監視します。要素の頭部分がtriggerBottomよりも上にある場合、.box.showクラスが追加され、要素が表示されます。

逆に、要素の頭部分がtriggerBottom以下にある場合は、.box.showクラスが削除され、要素が非表示になります。また、スクロールイベントの発火を100ミリ秒遅延させるために、setTimeout関数が使用されています。

<div class="box" id="box1">要素1</div>
<div class="box" id="box2">要素2</div>
<div class="box" id="box3">要素3</div>

UIHACK 編集長

解説

3つの要素が.boxクラスで指定されています。後は説明は不要かな

.box {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.box.show {
  opacity: 1;
  transform: translateY(0);
}

UIHACK 編集長

解説

.boxクラスの要素に対して初めは透明で下方向に移動した状態にスタイルを設定し、.box.showクラスが追加されると不透明になり、元の位置に戻るアニメーションが発生するようになっています。これにより、スクロールや要素の表示状態に応じて要素のアニメーションが制御されます。

const boxes = document.querySelectorAll(".box");

const options = {
  threshold: 0.2,
};

const animateBoxes = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    } else {
      entry.target.classList.remove("show");
    }
  });
};

const observer = new IntersectionObserver(animateBoxes, options);

boxes.forEach((box) => {
  observer.observe(box);
});

UIHACK 編集長

解説

Intersection Observerを使用して各要素が表示領域に入った場合にshowクラスを追加し、要素のアニメーションをトリガーします。

要素が表示領域に入るとentry.isIntersectingがtrueになり、要素にshowクラスが追加されます。これにより、要素は不透明になり、元の位置に戻るアニメーションが発生します。要素が表示領域から外れるとentry.isIntersectingがfalseになり、showクラスが削除され、要素は再び非表示になります。