반응형
안녕하세요. 오늘은 간단하게 스크롤을 내렸을때 애니메이션 효과를 줄 수 있는 라이브러리를 알아보겠습니다.
aos.js로 쉽게 스크롤 애니메이션을 구현할 수 있습니다.
aos.js는 간단한 추가만으로 구현이 가능하기 때문에 어렵지 않게 스크롤 애니메이션 구현이 가능합니다.
1. 설치
<head>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>우선 aos.css와 aos.js를 불러옵니다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
위의 홈페이지에서 직업 다운로드 받아서 넣어주셔도 됩니다.
2. 코드
다음은 html, css, js 코드입니다.
[html]
<div data-aos="fade-up" data-aos-duration="3000">
</div>
<div data-aos="fade-up"></div>위의 홈페이지를 참고하면 다양한 스크롤 효과를 확인할 수 있습니다.
구현하고자 하는 효과를 data-aos에 넣어주시면 됩니다.
[css]
div {
width: 200px;
height: 200px;
background: red
}
div:nth-child(2){float: right;}
[js]
<script>
AOS.init();
</script>스크립트 영역에 AOS.init();를 넣어주시면 aos.js을 통해 간단하게 스크롤 애니메이션효과를 사용할 수 있습니다.
다음은 aos 옵션의 옵션입니다. 사용할 영역에 넣어서 사용해주시면 됩니다.
| data-aos | 사용할 애니메이션 효과명 |
| data-aos-easing | 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) |
| data-aos-anchor | 특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 |
| data-aos-delay | 애니메이션 재생 대기시간 설정(default: 0) |
| data-aos-offset | 애니메이션 효과가 시작될 객체의 위치 설정 |
| data-aos-duration | 애니메이션의 재생시간 설정(default: 400) |
| data-aos-anchor-placement | 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom) |
| data-aos-once | 스크롤 할때마다 애니매이션이 재생될지를 설정(default: false) |
반응형
'Web > jquery' 카테고리의 다른 글
| [Jquery] 더보기버튼 리스트 노출 (0) | 2023.03.10 |
|---|---|
| [jquery] slick slider 사용 방법[예제] (1) | 2023.03.10 |
| 스크롤 애니메이션 wow.js 사용법 (0) | 2023.02.08 |
| [jquery] 스크롤 내리면 상단고정, 스타일 변경되는 메뉴 (7) | 2022.08.30 |
| [jquery] 레이어 팝업 스크롤 막기 & 배경 어둡게 처리하기 (0) | 2022.03.28 |