1. 스크롤 애니메이션 라이브러리(AOS) 활용
-AOS(Animate On Scroll Library)
AOS는 자바스크립트를 다루는 방법을 몰라도 HTML 태그만 확인 할 줄 안다면 간단하게 스크롤 애니메이션을 구현 할 수 있는 라이브러리 이다. 간단한 적용 예시와 설명은 아래 링크 확인이 가능하다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
첫번째로, <head>태그 안에 아래와 같이 입력해서 라이브러리의 cdn을 불러온다.
<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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
두번째로, <body> 태그 or 공통으로 지정될 common.js 파일에 AOS 라이브러리 초기화 스크립트를 작성한다.
<body>
<script>
$(function(){
AOS.init();
});
</script>
</body>
여기까지 했다면 AOS 라이브러리를 사용하기 위한 준비과정을 모두 끝냈다.
아래 부터는 HTML에 작성된 요소에 애니메이션 효과를 적용하는 방법이다.
<!-- 가장 기본적인효과 -->
<div data-aos="fade-up"></div> <!-- 아래에서 위로 페이드인 -->
<div data-aos="fade-down"></div> <!-- 위에서 아래로 페이드인 -->
<div data-aos="fade-right"></div> <!-- 왼쪽에서 오른쪽으로 페이드인 -->
<div data-aos="fade-left"></div> <!-- 오른쪽에서 왼쪽으로 페이드인 -->
효과만 주기위해선 위처럼 'data-aos' 속성으로 해당 요소에 원하는 효과를 적용하면 매우 간단하게 스크롤 애니메이션이 동작한다.
효과에 여러가지 옵션을 적용하고자 한다면 아래와 같이 작성하면 된다.
<div data-aos="효과이름" aos-offset="300" aos-easing="ease-in-sine" aos-duration="500></div>
//data-aos-offset - 효과 시작 스크롤 위치 옵션
//data-aos-easing - 재생옵션
//data-aos-duration - 재생시간 옵션
아래 AOS 라이브러리 개발자의 GitHub에서 더 많은 효과,속성을 확인 해 볼 수 있다.
GitHub - michalsnik/aos: Animate on scroll library
Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.
github.com
'퍼블리셔 Note > JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT] Swiper 사용법 - 웹 슬라이드 구현 (0) | 2022.02.07 |
|---|---|
| [JQuery] 스크롤 페이드 인 앤 아웃 효과2 - 스크립트 작성 (0) | 2022.01.10 |
| [JQuery] 전체 동의 체크박스 처리 (0) | 2021.12.02 |
| [vanilla JS] select 박스 선택(option) 값 가져오기 (0) | 2021.10.06 |
| [vanilla JS]IE11에서 forEach 사용하는 법. (0) | 2021.10.05 |