【WEBデザイン】要素を遅延して動かしたときのメモ | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から1年以上経過しています。

ブラウザをスクロールしたとき、要素が遅延して下から上に移動するような動作を実装したときのメモ。
サンプルはこちら

HTML

slide-upクラスを設定した要素に対して下から上に遅延して下から上に移動するようになる。

<div class="contents slide-up">
            <h2 class="slide-up">Section Title</h2>
            <p class="slide-up">sample,text,sample,text,sample,text,sample,text,sample,text,sample,text,sample,text</p>
        </div><!--/.contents-->

CSS

秒数はCSSで調整。

.slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

Javascript

スライドが動作対するタイミングと遅延するタイミングは調整が可能。ただし遅延するタイミングは個別には設定できない。今後改良するかもしれない。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const options = {
      threshold: 0.1, // 要素が10%見えたら発火
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          // 対象の要素にvisibleクラスを追加
          target.classList.add('visible');

          // 子要素にもタイミングをずらしてアニメーションを適用
          const childElements = target.querySelectorAll('.slide-up');
          childElements.forEach((child, index) => {
            child.style.transitionDelay = `${index * 0.2}s`; // 0.2秒ごとに遅延
            child.classList.add('visible');
          });

          // 一度だけアニメーションを適用したい場合は以下を有効化
          observer.unobserve(target);
        }
      });
    }, options);

    // 対象となる要素を監視
    const slideUpElements = document.querySelectorAll('.slide-up');
    slideUpElements.forEach((element) => observer.observe(element));
  });
  </script>