AOS.js

16486 ワード
AOS.js js テキストリンク
KakaoTalkやTossなどでネットサーフィンをしているとき
レイアウトがきれいに動いているのを見て、ウェブデザイナーとして
私は仕事をしている友达に聞いて、彼はこれが何なのかと言って、それから私は探しました.
AOS.jsだと教えてくれ
使い方が簡単だと聞いて、簡単に勉強しましょう.
Googleで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~
再帰呼び出し
データ型-実数の表示