728x90
오늘은 페이지 스크롤에 따라 등장하는 모션을 간단하게 제공해주는 라이브러리 AOS.js를 소개드리려 합니다.
물론 복잡하지 않은 사이트에 간단한 등장 모션정도는 직접짜서 넣어도 무관하겠지만
내용과 레이아웃에 따라 속도, 방향, 지연시간등을 다르게 적용하는게 은근히 번거로울 수 있습니다.
그래서 발견한 aos.js 라이브러리를 이용하면 간단하게 각지점마다 다양한 모션과 옵션을 적용할 수 있습니다.
사용법 또한 매우 간단합니다.
CSS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>INITIALIZE AOS
<script>
AOS.init();
</script>
<body>
<div data-aos="fade-right" data-aos-duration="1000" data-aos-offset="500" data-aos-delay="500">모션영역</div>
</body>위의 예제소스를 토대로 설명하면 기본css와 js를 import한후에
모션을 적용하고자 객체에 정해진 속성값을 넣어주기만 하면 됩니다.
data-aos="fade-right" // 모션방향 (필수값)
아래는 필요에 따라 선택해서 넣으면되는 옵션값들입니다.
data-aos-duration="1000" // 모션이동시간
data-aos-offset="500" // 모션시작점
data-aos-delay="500" // 모션시작 지연
더 많은 내용은
아래 공식사이트를 들어가면 데모가 잘 정돈되어 있습니다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
감사합니다 :)
728x90
반응형
'코딩저장소' 카테고리의 다른 글
| GreenSock 플러그인 ScrollTrigger 사용법 (0) | 2022.02.22 |
|---|---|
| fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합) (29) | 2022.02.21 |
| 스크롤을 내리고 올리는지 체크하는법 (0) | 2021.12.30 |
| 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올수있나요? (0) | 2021.12.21 |
| 정말 간단한 부드럽게 마우스 따라다니기 (0) | 2021.12.21 |
댓글