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`;
}
});