자바스크립트 스크롤 애니메이션 질문입니다~~

자바스크립트 스크롤 애니메이션 질문입니다~~

QA

자바스크립트 스크롤 애니메이션 질문입니다~~

본문

안녕하세요!!

 


    <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');

            }

 

이렇게 추가해봤었는데 안되네요 ㅎㅎ.. 

 

부끄러운 실력이지만 질문드려봅니다

 

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT