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

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>