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

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

QA

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

답변 1

본문

참고주소: 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`;
  }
});
 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 0
© SIRSOFT
현재 페이지 제일 처음으로