AOS 반응형 방향 바꾸는 방법 – 모바일에서 fade-left를 fade-up으로 변경하기
CSS 26.03.13 조회 16AOS 반응형 방향 바꾸는 방법 – 모바일에서 fade-left를 fade-up으로 변경하기
AOS는 기본적으로 반응형에 따라 애니메이션 방향이 자동으로 변경되지 않습니다.
따라서 CSS media query를 활용해 transform 값을 재정의하면 간단하게 해결할 수 있습니다.
➰➰➰
✅ 왜 반응형에서 AOS 애니메이션 방향을 바꿔야 할까?
웹사이트를 반응형으로 제작하면 PC와 모바일에서 레이아웃 구조가 달라지는 경우가 많습니다.
PC 레이아웃 : 이 구조에서는 좌우에서 등장하는 애니메이션이 자연스럽습니다. (fade-left / fade-right)
1 2 | col-2 [텍스트] [이미지] | cs |
하지만 모바일에서는 보통 다음처럼 바뀝니다.
Mobile 레이아웃 : 이 구조에서는 아래에서 위로 등장하는 애니메이션이 더 자연스럽습니다. (fade-up)
1 2 3 | col-1 [텍스트] [이미지] | cs |
✅ AOS 기본 사용 방법
1 2 | <div data-aos="fade-left">텍스트 영역</div> <div data-aos="fade-right">이미지 영역</div> | cs |
✅ 반응형에서 AOS 방향 바꾸는 가장 쉬운 방법
AOS는 CSS transform을 기반으로 애니메이션이 동작합니다.
따라서 media query에서 transform을 수정하면 애니메이션 방향을 쉽게 변경할 수 있습니다.
· [data-aos=""] : aos 초기값
· [data-aos=""].aos-animate : aos 작동값
1 2 3 4 | @media (max-width:768px){ [data-aos="fade-left"], [data-aos="fade-right"]{transform: translate3d(0,40px,0);opacity:0;} [data-aos="fade-left"].aos-animate, [data-aos="fade-right"].aos-animate{transform: translate3d(0,0,0);opacity:1;} } | cs |
✅ CSS로 AOS 방향 바꾸는 방법의 장점
1. JS 수정이 필요 없음
: AOS 옵션을 따로 변경할 필요 없이 CSS만으로 해결 가능합니다.
2. 유지보수가 쉬움
: 기존 마크업을 그대로 유지할 수 있습니다.
3. 자연스러운 반응형 애니메이션
: 레이아웃 구조에 맞는 애니메이션을 적용할 수 있습니다.
➰➰➰
반응형 웹에서는 레이아웃 구조가 바뀌기 때문에 애니메이션 방향도 함께 고려하는 것이 좋습니다.
CSS media query를 활용해 transform 값을 재정의하면 AOS 애니메이션 방향을 간단하게 조정할 수 있습니다.
작은 인터랙션 하나가 사용자 경험의 완성도를 높이기도 합니다.
섬세한 디테일까지 꼼꼼하게 고려한 디자인키트의 웹 템플릿으로 보다 쉽고 빠르게 웹사이트를 제작해 보세요.
✨관련링크✨
