1. AOS(Animate On Scroll) 라이브러리 소개
가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 사이트를 볼 수 있다.
스크롤을 했을 때 요소에 나타나기 애니메이션 효과를 구현해주는 라이브러리를 소개하고자 한다.
바로 AOS(Animate On Scroll Library)이다.
간단한 적용 예시와 설명은 라이브러리 홈페이지에서도 확인할 수 있다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
2. 준비 과정
혹 JavaScript를 다루는 방법을 모르더라도, <div> 태그 사용법만 안다면 적용해 볼 수 있게 설명하고자 한다.
먼저 <head> 태그 안에 다음과 같이 입력하여 라이브러리 파일을 불러온다.
<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>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
그 다음 콘텐츠 내용이 있는 <body> 태그 최상단에 AOS 라이브러리 초기화 스크립트를 작성해준다.
<body>
<script>
AOS.init();
</script>
...
</body>
위 내용이 AOS 라이브러리를 적용하기 위한 준비과정 전부이다.
그렇다면 한번 각 요소(텍스트, 사진 등)에 스크롤 연동 애니메이션 효과를 적용하는 방법을 알아보자.
3. 효과 적용하기
기본 옵션은 다음과 같이
<div aos="효과 이름">
...
...
</div>
애니메이션을 적용하고자 하는 요소를 둘러싼 div 태그에 위와 같이 작성하는 것이다.
(a 태그 등 다른 태그에도 적용 가능하다.)
효과에 여러 옵션을 적용하고자 한다면, 다음과 같이 작성하면 된다.
<div aos="효과 이름" aos-offset="300" aos-easing="ease-in-sine" aos-duration="500">
...
...
</div>
AOS 라이브러리에서 제공하는 애니메이션의 효과 이름은 다음과 같다.
3-1. 효과 종류
- Fade animations:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
- Flip animations:
- flip-up
- flip-down
- flip-left
- flip-right
- Slide animations:
- slide-up
- slide-down
- slide-left
- slide-right
- Zoom animations:
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
다음은 효과 옵션들이다.
3-2. 효과 옵션
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
- 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-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
4. 완성본 예시
완성된 형태의 코드를 통해 적용 방법을 다시 한번 살펴보자.
<!DOCTYPE html>
<html>
<head>
<title>사이트 이름</title>
<!-- AOS 라이브러리 불러오기-->
<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>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<!-- 스크립트로 초기화 -->
<script>
AOS.init();
</script>
<div data-aos="fade-up" data-aos-duration="1000">
<!-- 애니메이션 효과 적용될 요소 내용 -->
</div>
</body>
</html>
자세한 사용 방법과 옵션들에 대한 정리는 라이브러리 개발자의 GitHub 내용을 참고하자
https://github.com/michalsnik/aos
michalsnik/aos
Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.
github.com
'Development > Web (HTML, CSS)' 카테고리의 다른 글
| Visual Studio Code Live Server 플러그인으로 웹 개발 쉽게 하자 (0) | 2020.08.27 |
|---|---|
| Neumorphism (뉴모피즘) CSS로 만들기 (1) | 2020.08.23 |
| 웹사이트 상단 진행바 넣기 / HTML 16진수 색상코드 쉽게 얻는 법 (0) | 2020.08.17 |
| 티스토리 블로그 상단바(메뉴바) 애플 홈페이지 느낌 내기 (0) | 2020.07.27 |
