스크롤 애니메이션 충돌(?) 문의 드립니다.

스크롤 애니메이션 충돌(?) 문의 드립니다.

QA

스크롤 애니메이션 충돌(?) 문의 드립니다.

본문

기존 페이지에 스크롤 애니메이션을 적용해 보려고 시도해 보다가 아래 소스로 적용에는 성공했습니다.

스크롤 하면 페이지 단위로 이동하는 (Fullpage) 소스를 함께 적용해서 사용중인데요.

아래 소스를 함께 적용하면 레이아웃은 깨지지 않고 잘 적용이 됩니다.

 

그런데 어떤때는 스크롤 애니메이션이 적용 되었다가 페이지를 리로드하면 적용이 안되는 문제가 있고요.

이경우 캐시를 삭제하면 다시 적용이 되기는 하는데, 리프레시 하면 다시 적용이 안되더라고요.

또 한가지 문제는 여러개의 DIV에 스크롤 애니메이션을 적용하면 이중 몇개만 적용이 되고 나머지는 적용이 되지 않습니다.

애니메이션이 적용되지 않는 경우는 아예 해당이미지가 보이지를 않네요.

혹시 충돌이나 멈춤현상 없이 지정한 효과대로 애니메이션이 원활하게 적용되게 하려면 어떤 부분을 확인해야 할까요?

완전한 해결이 아니더라도 도움이 될만한 조언을 구합니다.

AOS나 Wow.js 등 여러가지 라이브러리를 시도해 보다가 충돌 및 간섭 현상으로 적용하지 못했어서요.

아래 소스를 활용해서라도 원활하게 스크롤 애니메이션을 적용해 보고 싶습니다.

 

사용한 스크롤 애니메이션 소스를 아래에 올립니다.

도움 부탁 드립니다.

 

    <style>
      /* Scroll Animation (sa, 스크롤 애니메이션) */
      .sa {
        opacity: 0;
        transition: all 2s ease;
      }

      /* 아래에서 위로 페이드 인 */
      .sa-up {
        transform: translate(0, 100px);        
      }
      /* 위에서 아래로 페이드 인 */
      .sa-down {
        transform: translate(0, -100px);
      }
      /* 왼쪽에서 오른쪽으로 페이드 인 */
      .sa-right {
        transform: translate(-100px, 0);
      }
      /* 오른쪽에서 왼쪽으로 페이드 인 */
      .sa-left {
        transform: translate(100px, 0);
      }
      /* 왼쪽으로 회전하면서 페이드 인 */
      .sa-rotateL {
        transform: rotate(180deg);
      }
      /* 오른쪽으로 회전하면서 페이드 인 */
      .sa-rotateR {
        transform: rotate(-180deg);
      }
      /* 작아진 상태에서 커지면서 페이드 인 */
      .sa-scaleUp {
        transform: scale(.5);
      }
      /* 커진 상태에서 작아지면서 페이드 인 */
      .sa-scaleDown {
        transform: scale(1.5);
      }

      .sa.show {
        opacity: 1;
        transform: none;
      }
    </style>

    <script>
// Scroll Animation (sa, 스크롤 애니메이션)
const saDefaultMargin = 0;
let saTriggerMargin = 0;
let saTriggerHeight = 0;
const saElementList = document.querySelectorAll('.sa');

const saFunc = function() {
  for (const element of saElementList) {
    if (!element.classList.contains('show')) {
      if (element.dataset.saMargin) {
        saTriggerMargin = parseInt(element.dataset.saMargin);
      } else {
        saTriggerMargin = saDefaultMargin;
      }

      if (element.dataset.saTrigger) {
        saTriggerHeight = document.querySelector(element.dataset.saTrigger).getBoundingClientRect().top + saTriggerMargin;
      } else {
        saTriggerHeight = element.getBoundingClientRect().top + saTriggerMargin;
      }

      if (window.innerHeight > saTriggerHeight) {
        let delay = (element.dataset.saDelay) ? element.dataset.saDelay : 0;
        setTimeout(function() {
          element.classList.add('show');
        }, delay);
      }
    }
  }
}

window.addEventListener('load', saFunc);
window.addEventListener('scroll', saFunc);
    </script>

 

<div class="sa sa-up" data-sa-delay="600"><img src="images/con1.png" width=100%></div>
<div class="sa sa-right" data-sa-delay="400"><img src="images/con2.png" width=100%></div>
<div class="sa sa-left" data-sa-delay="200"><img src="images/con3.png" width=100%></div>

이 질문에 댓글 쓰기 :

답변 1

아마도 자바스크립트쪽 에러가 나는 것 같습니다.

 

개발자 모드에서 어떤 에러가 있는지를 체크해 보세요.

 

네~ 답변 감사드립니다. 오류가 있을때 크롬 개발자도구를 이용해서 많이 도움이 되기는 하는데, 스크립트 에러 같은 경우는 어떻게 확인하고 수정해야 하는지 잘 모르겠어서요. 이 부분도 좀 찾아봐야 할것 같네요. 감사합니다.

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

회원로그인

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