자바스크립트 스크롤 애니메이션 질문입니다~~
본문
안녕하세요!!
<script>
// Scroll Animation (sa, 스크롤 애니메이션)
const saTriggerMargin = 300;
const saElementList = document.querySelectorAll('.sa');
const saFunc = function() {
for (const element of saElementList) {
if (!element.classList.contains('show')) {
if (window.innerHeight > element.getBoundingClientRect().top + saTriggerMargin) {
element.classList.add('show');
} else if (window.innerHeight < element.getBoundingClientRect().top + saTriggerMargin) {
element.classList.remove('show');
}
}
}
}
window.addEventListener('load', saFunc);
window.addEventListener('scroll', saFunc);
</script>
인터넷의 소스를 복붙하여.. 수정하고 있는데요!
오브젝트가 자신의 자리만큼 스크롤이 내려오면 클래스가 추가되고
스크롤을 다시 올리면 클래스를 없애는 걸 하고싶습니다
클래스 추가는 잘 되는데 제거가 되지않아서.. 왜그런것인지 ㅠㅠ
else if (window.innerHeight < element.getBoundingClientRect().top + saTriggerMargin) {
element.classList.remove('show');
}
이렇게 추가해봤었는데 안되네요 ㅎㅎ..
부끄러운 실력이지만 질문드려봅니다
답변을 작성하시기 전에 로그인 해주세요.
