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