반응형
안녕하세요.
디블리셔 미덜입니다.
오늘은, AOS 애니메이션 라이브러리 사용 방법을 퍼블리싱에 적용하는 방법을 공유드리겠습니다.
AOS는 복잡하게 다운받을 필요없이, 링크 2개만 헤더영역에 추가하면 되는 아주 간단한 라이브러리라
실무에 참 많이 애용하고 있습니다.
처음 사이트에 들어갔을때, 뭘 어떻게 적용하는건가 우왕좌왕하실 분들이 계실텐데요.
초보자들도 쉽게 적용하실 수 있으니, 걱정 마세요!
1. head 영역에 아래 소스를 넣어, css와 script를 연결해줍니다.
<head>
<!-- AOS 라이브러리 불러오기-->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>2.body안에 aos 스크립트를 삽입해줍니다.
<body>
<script>
AOS.init();
</script>
</body>3. 애니메이션이 필요한 태그안에 라이브러리의 속성값들을 넣어주면 끝-
<div data-aos="fade-up">애니메이션 필요한 영역 </div>📌 AOS 라이브러리는 블록태그에만 적용 가능합니다. (인라인태그 적용 불가)
원하는 애니메이션의 효과들은 AOS페이지에 들어가셔서 직접 눈으로 보며 골라서 넣으시면 될 것 같아요!
페이드인아웃효과부터 플립, 줌등 다양한 효과들이 많아서 랜딩페이지 또는 홈페이지 퍼블리싱을 하는데 아주 유용하게 쓰인답니다 :-)
AOS 옵션 정리
| 옵션 | 내용 | 기본값 | 값 |
| data-aos="값" | 애니메이션 효과 | - | 사이트에서 세부 효과 확인 https://michalsnik.github.io/aos/ |
| data-aos-easing="값" | 애니메이션 속도 곡선 지정 linear = 처음부터 끝까지 속도 동일 ease-in = 느린 시작 ease-out = 느린 끝 |
ease | linear ease ease-in ease-out ease-in-out ease-in-back ease-out-back ease-in-out-back ease-in-sine ease-out-sine ease-in-out-sine ease-in-quad ease-out-quad ease-in-out-quad ease-in-cubic ease-out-cubic ease-in-quart ease-out-quart ease-in-out-quart |
| data-aos-anchor="값" | 특정 객체에 anchor를 설정하여 어떤 객체를 기준으로 애니메이션이 시작될지 결정 | - | - |
| data-aos-delay="값" | 애니메이션 대기 시간 | 0 | 0,50,100~...3000 |
| data-aos-offset="값" | 애니메이션 시작 위치 | - | - |
| data-aos-duration="값" | 애니메이션 재생 시간 | 400 | 0,50,100~...3000 |
| data-aos-anchor-placement="값" | 애니메이션 적용 위치 설정 | top-bottom | top-bottom top-center top-top center-bottom center-center center-top bottom-center bottom-top |
| data-aos-once="값" | 스크롤시 애니메이션 다시 재생 (false 입력 시, 애니메이션 반복 없음.) |
false | true, false |
AOS 라이브러리는, 있는 그대로 사용하는것도 좋지만
위의 속성값들을 활용하여 이미지와 이미지 사이에 시차를 주는식으로 활용하여
더 재미있는 애니메이션으로 탄생시킬수도 있으니, 모두들 활용해보세요! ☺️
반응형
'퍼블리싱' 카테고리의 다른 글
| [scrollify] 스크롤리파이의 모든 것 / 섹션별로 헤더 색상 전환하기 등 (0) | 2023.11.08 |
|---|---|
| AOS animation과 slick slider 사용시 스크롤 오류 해결 (0) | 2023.07.27 |
| 스크롤 반응하는 변하는 헤더 | Header change on scroll (0) | 2023.02.16 |
| 한페이지에 여러개의 다중 모달 띄우는 간단한 제이쿼리 (0) | 2023.02.15 |
