IntersectionObserverによるスクロール判定CSSアニメーションサンプル
↓ 1000px以上スクロールして確認してみてください。
scrollAnime1
scrollAnime2
HTML
<div class="scrollAnime">scrollAnime1</div>
<hr>
<div class="scrollAnime">scrollAnime2</div>
CSS
h2, hr {
margin-bottom: 1000px;
}
.scrollAnime {
transition: all 1s linear;
transform: translateX(-20px);
opacity: 0;
}
.scrollAnime.active {
transform: translateX(0);
opacity: 1;
}
JavaScript
const targets = [].slice.call(document.querySelectorAll('.scrollAnime'))
const targetsLen = targets.length
if (targetsLen) {
const observer = new IntersectionObserver(changes => {
for (let i in changes) {
if (changes[i].isIntersecting) {
changes[i].target.classList.add('active')
const activeLen = document.querySelectorAll('.scrollAnime.active').length
if (targetsLen === activeLen) {
observer.disconnect()
}
}
}
})
targets.forEach(target => observer.observe(target))
}
元記事を表示する