AOS.JS

7524 단어 JS

Animation of Scroll 은 CSS 3 animation 을 기반 으로 저 버 전 브 라 우 저 를 지원 하지 않 습 니 다.Animation. css 기반 유 료 라 이브 러 리 WOW. JS 와 비슷 하지만 자신 만 의 특색 이 있 습 니 다.
npm 홈 페이지 aos. js

설치 npm i aos --save

수 동 추가

<link rel='stylesheet' href='_base_file_/aos.css'>
<script src='_base_file_/aos.js'>script>
<script>
	AOS.init();
script>

설정

기본 값

AOS.init({
	offset:120,//px，       
	duration:400,//ms，    ，50-3000
	easing:ease,//    
	delay:0,//s，    
	anchor:null，//body，      ，Element
	anchor-placement:top-bottom,//top bottom  ，top bottom  ，top|center|bottom      ，     ，    center-center
	once:false//       
})

과도 시간 을 사용자 정의 하고 50 - 3000 의 제한 을 취소 합 니 다. 예 를 들 어 5 초

body[data-aos-duration='5000'] [data-aos], [data-aos][data-aos][data-aos-duration='5000']{
    transition-duration: 5000ms;
  }

작은 기교: 두 [data-aos] 의 문법 으로 우선 순 위 를 높 일 필요 가 없다 !important.

원소 에 적용

<div data-aos="animation_name">

기본 설정 항목, 추가 data-aos-, 요소 역할

API AOS.init() AOS.refresh() 창 크기 가 바 뀌 었 을 때 AOS 기본 감청 으로 수 동 으로 실행 가능 AOS.refreshHard()

기타

비활성화

AOS.init({
	disable:false,//  ，false|mobile|phone|tablet
	//  ，     
	disable:window.innerWidth > 400
	//  ，    ，return false|true
	disable:function(){
		returen window.innerWidth > 400
	}
})

사용자 정의 초기 화 트리거 이벤트

	AOS.init({
		//   DOMContentLoaded   ，
		//          ，  AOS   
		startEvent: "Element_Event"
		//  ，window load  
		startEvent: "load"
	})

애니메이션 리스트: data-aos:

fade 클래스: fade, fade - up, fade - down, fade - left, fade - right, fade - up - right, fade - down - left, fade - down - right

flip 류: flip - up, flip - down, flip - left, flip - right

슬라이드 클래스: 슬라이드 업, 슬라이드 다운, 슬라이드 왼쪽, 슬라이드 라이트

zoom 클래스: 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

시간 곡선: data-aos-easing: linear, easy, easy - in, easy - out, easy - in - out, easy - in - back, easy - in - out - back, easy - in - sin, easy - out - sine, easy - in - out - quad, easy - in - out - quad, easy - in - cubic, easy - in - out - cubic, easy - in - quart, easy - out - quart, easy - in - out - quart

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

JS 판단 수조 네 가지 실현 방법 상세

그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다