스크롤에 반응하는 애니메이션 AOS 적용하기

퍼블리싱

스크롤에 반응하는 애니메이션 AOS 적용하기 | Animate On Scroll Library

디블리셔 써니 2023. 3. 20. 21:55

안녕하세요.

디블리셔 미덜입니다.

오늘은, AOS 애니메이션 라이브러리 사용 방법을 퍼블리싱에 적용하는 방법을 공유드리겠습니다.

AOS는 복잡하게 다운받을 필요없이, 링크 2개만 헤더영역에 추가하면 되는 아주 간단한 라이브러리라

실무에 참 많이 애용하고 있습니다.

처음 사이트에 들어갔을때, 뭘 어떻게 적용하는건가 우왕좌왕하실 분들이 계실텐데요.

초보자들도 쉽게 적용하실 수 있으니, 걱정 마세요!

1. head 영역에 아래 소스를 넣어, css와 script를 연결해줍니다.

<head>
	<!-- AOS 라이브러리 불러오기-->
	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
</head>

2.body안에 aos 스크립트를 삽입해줍니다.

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

3. 애니메이션이 필요한 태그안에 라이브러리의 속성값들을 넣어주면 끝-

<div data-aos="fade-up">애니메이션 필요한 영역 </div>

📌 AOS 라이브러리는 블록태그에만 적용 가능합니다. (인라인태그 적용 불가)

원하는 애니메이션의 효과들은 AOS페이지에 들어가셔서 직접 눈으로 보며 골라서 넣으시면 될 것 같아요!

페이드인아웃효과부터 플립, 줌등 다양한 효과들이 많아서 랜딩페이지 또는 홈페이지 퍼블리싱을 하는데 아주 유용하게 쓰인답니다 :-)

AOS 옵션 정리

옵션	내용	기본값	값
data-aos="값"	애니메이션 효과	-	사이트에서 세부 효과 확인 https://michalsnik.github.io/aos/
data-aos-easing="값"	애니메이션 속도 곡선 지정 linear = 처음부터 끝까지 속도 동일 ease-in = 느린 시작 ease-out = 느린 끝	ease	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-quart ease-out-quart ease-in-out-quart
data-aos-anchor="값"	특정 객체에 anchor를 설정하여 어떤 객체를 기준으로 애니메이션이 시작될지 결정	-	-
data-aos-delay="값"	애니메이션 대기 시간	0	0,50,100~...3000
data-aos-offset="값"	애니메이션 시작 위치	-	-
data-aos-duration="값"	애니메이션 재생 시간	400	0,50,100~...3000
data-aos-anchor-placement="값"	애니메이션 적용 위치 설정	top-bottom	top-bottom top-center top-top center-bottom center-center center-top bottom-center bottom-top
data-aos-once="값"	스크롤시 애니메이션 다시 재생 (false 입력 시, 애니메이션 반복 없음.)	false	true, false

AOS 라이브러리는, 있는 그대로 사용하는것도 좋지만

위의 속성값들을 활용하여 이미지와 이미지 사이에 시차를 주는식으로 활용하여

더 재미있는 애니메이션으로 탄생시킬수도 있으니, 모두들 활용해보세요! ☺️