AOS.js

이한영·2021년 11월 11일

js

목록 보기

1/1

카카오톡이나 토스등 웹서핑을 하다보면 화면에
레이아웃이 이쁘게 움직이는걸 보게되어 웹디자이너로
일하고있는 친구한테 물어보니 이게 뭐였더라하고 찾아보더니
AOS.js라는걸 알려주었다.
사용법이 간단하다고 하니 간단하게 배워보자!

구글에 aos라고 검색하면 바로 홈페이지가 나온다 들어가보자

오른쪽 상단에 고양이를 눌러 깃헙으로 드가보즈아

들어가보면 하단에 REDEME파일에 친절하게 설명이 나와있다.

cdn과 사용법이 있으니 시작해보즈아

영어를 잘 몰라서 한글로 번역하니 친절하게
주석도 이쁘게 달려있다 ^^

<head>
	<title>AOS.js tutorials</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style type="text/css">
	body{
		padding-top: 1000px;
		margin: 0 auto;
		text-align: center;
	}
	div{
		margin: 0 auto;
		width: 500px;
		height: 300px;
		background-color: black;
		margin-top: 300px;
		display: block;
	}
</style>
</head>
<body>
	<%-- div에서 바로 효과 입히기 --%>
	<div data-aos="fade-up" data-aos-duration="1500">
	 	<div class="example"> 
	 		<p style="color: white; font-size: 20px; font-weight: 600;">Example</p> 
	 	</div>
	 </div>
	
	<%--위쪽으로 페이드 효과 --%>
	<div data-aos="fade-up"></div>
	
	<%--아래쪽으로 페이드 효과 --%>
	<div data-aos="fade-down"></div>
	<%--오른쪽으로 페이드 효과 --%>
	<div data-aos="fade-right"></div>
	
	<%--왼쪽으로 페이드 효과 --%>
	<div data-aos="fade-left"></div>
	
	<%--왼쪽으로 플립 효과 --%>
	<div data-aos="flip-left"></div>
	
	<%--오른쪽으로 플립 효과 --%>
	<div data-aos="flip-right"></div>
	
	<%--위쪽으로 플립 효과--%>
	<div data-aos="flip-up"></div>
	
	<%--아래쪽으로 플립효과 --%> 
	<div data-aos="flip-down"></div>
	
	<%--줌 효과 --%>
	<div data-aos="zoom-in"></div>
	
	
	
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
	AOS.init();
	// 선택적 설정 객체를 전달할 수도 있습니다 
	AOS.init({
	  // 전역 설정: 
	  disable: false,  // 다음 값 허용: 'phone', 'tablet', 'mobile', boolean, expression 또는 function 
	  startEvent: 'DOMContentLoaded',  // 디스패치된 이벤트의 이름 AOS가 
	  initClassName: 'aos-init',  // 초기화 후 클래스가 적용됨 
	  animatedClassName: 'aos-animate',  // 애니메이션에 적용된 클래스 
	  useClassNames: false,  // true의 경우, 스크롤에 클래스 같은 데이터 aos``의 내용을 추가합니다 
	  disableMutationObserver: false,  // 비활성화 자동 돌연변이 '탐지가 (고급) 
	  debounceDelay: 50,  // 디 바운스에 지연 창 크기를 조절하면서 사용 (고급 ) 
	  throttleDelay: 99,  // 페이지를 스크롤하는 동안 사용되는 스로틀 지연(고급)
	  

	  // `data-aos-*` 속성에 의해 요소별로 재정의될 수 있는 설정: 
	  offset: 120,  // 원래 트리거 포인트에서 오프셋(px) 
	  delay: 0,  // 0에서 3000 사이의 값 , 단계 50ms 
	  duration: 2000,  // 0에서 3000 사이의 값, 단계 50ms 
	  easing: 'ease',  // AOS 애니메이션에 대한 기본 여유 
	  once: false,  // 애니메이션이 한 번만 발생해야 하는지 여부 - 아래로 스크롤하는 동안 
	  mirror: false,  // 요소를 지나 스크롤하는 동안 요소에 애니메이션 효과를 줄지 여부
	  anchorPlacement: 'top-bottom',  // 애니메이션을 트리거해야 하는 창과 관련된 요소의 위치를 정의합니다.
	  });
</script>
</body>

good~