AOS 라이브러리와 zoom css 관련 문제 질문있습니다 ㅠ

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
AOS 라이브러리와 zoom css 관련 문제 질문있습니다 ㅠ

QA

AOS 라이브러리와 zoom css 관련 문제 질문있습니다 ㅠ

본문

참고주소: https://bartc.cafe24.com/test_scroll.php

현재 어쩔수없이 미디어쿼리로 body에 zoom을 넣는 상황이 왔는데
<code>

*{margin:0;padding:0}
body{}
.sec{width: 100%;height: 800px;display: flex;align-items: center;justify-content: center;}
.sec p{font-size: 100px;    font-weight: bold;}
.sec01{background: #9f0000;}
.sec02{background: #27259b;}
.sec03{background: #139936;}
.sec04{background: #691f52;}
.sec05{background: #c9bc19;}

@media (max-width: 1600px) {
    body{zoom:0.8}
}
@media (max-width: 1400px) {
    body{zoom: 0.65;}
}
@media (max-width: 1200px) {
    body{zoom: 0.55;}
}
@media (max-width: 1000px) {
    body{zoom: 0.45;}
}
@media (max-width: 800px) {
    body{zoom: 0.35;}
}
@media (max-width: 600px) {
    body{zoom:0.3}
}

</code>

브라우저창을 줄이면

기존에 붙어있던 aos 라이브러리가 위치파악이 안되어 aos 코드(data-aos="fade-up")가 먹질 않고있습니다

혹시 편법이 있을까요?
관련링크나 조언부탁드리겠습니다..
 

이 질문에 댓글 쓰기 :

답변 1

브라우저 창을 줄였을 때 AOS 라이브러리가 정상 작동하지 않는 문제 해결에 도움이 될 수 있는 몇 가지 방법을 알려드리겠습니다.

1. vh 단위 사용:

px 대신 vh 단위를 사용하여 요소의 크기를 설정하면 브라우저 크기에 따라 비율적으로 조절되어 AOS 애니메이션이 정상 작동할 가능성이 높습니다.

.sec {
  height: 80vh;
}
.sec p {
  font-size: 10vh;
}
 

 

2. calc() 함수 사용:
calc() 함수를 사용하여 요소의 크기를 브라우저 크기에 따라 동적으로 계산할 수 있습니다

 
.sec {
  height: calc(80vh - 100px);
}
.sec p {
  font-size: calc(10vh + 20px);
}


3. 미디어 쿼리 조정:
미디어 쿼리에서 zoom 속성 대신 max-width 속성을 사용하여 요소의 크기를 조절하면 AOS 애니메이션이 정상 작동하도록 조정할 수 있습니다.

 

 
@media (max-width: 1600px) {
  .sec {
    height: 60vh;
  }
  .sec p {
    font-size: 8vh;
  }
}
@media (max-width: 1400px) {
  .sec {
    height: 50vh;
  }
  .sec p {
    font-size: 6vh;
  }
}

 

4. JavaScript 코드 사용
JavaScript 코드를 사용하여 브라우저 크기 변화에 따라 요소의 위치와 크기를 동적으로 조절하면 AOS 애니메이션이 정상 작동하도록 할 수 있습니다.
 

window.addEventListener('resize', function() {
  const secEls = document.querySelectorAll('.sec');
  for (const secEl of secEls) {
    secEl.style.height = `${window.innerHeight / 2}px`;
  }
});
 

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

회원로그인

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