lognlook

포스트 보기

[라이브러리] aos(animate on scroll) 적용 하기

: 15 : cheolee

: 공부 > JavaScript : 22 : 2024-09-03

1. aos 라이브러리 추가

- cdn 소스 직접 로딩

index.html

	
			1
2

			<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

			cs

- 파일 직접 추가

:깃허브 페이지에서 데모페이지로 이동하여 다운로드

https://github.com/michalsnik/aos

: ① 또는 ② 클릭하여 데모페이지로 이동

: 데모페이지 하단에서 파일 다운로드

: 압축 해체하여 프로젝트 폴더에 복사 후 위치 소스 추가

index.html

	
			1
2

			<link rel="stylesheet" href="/js/lib/aos-master/dist/aos.css" />
<script src="/js/lib/aos-master/dist/aos.js"></script>

			cs

- 패키지 매니저를 통한 설치

:npm 사용

npm install aos --save

:yarn 사용

yarn add aos

: 설치 후 import

	
			1
2
3
4

			import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ...
AOS.init();
Colored by Color Scripter

			cs
		

2. aos 초기화 자바스크립트 설정 추가

: aos를 적용할 요소 이후(뒤)에 위치하도록 추가

	
			1
2
3

			<script>
  AOS.init();
</script>

			cs
		

3. 애니메이션 효과를 적용할 요소에 속성 설정

: aos 적용 요소가 초기화 메소드 위(앞)에 위치하는지 확인

	
			1
2
3
4
5
6
7
8

			<div 
  data-aos="fade-down"
  data-aos-offset="50"
  data-aos-easing="ease-out-cubic"
  data-aos-duration="200"
>
애니메이션 요소
</div>

			cs
		

aos 라이브러리 설치 및 적용 예시

See the Pen aos library 적용 by YongCheol (@YongCheol-the-scripter) on CodePen.

비밀글