마지막 안정 릴리스(v2)를 보려면 여기로 이동하세요.
이것이 실제로 어떻게 작동하는지 더 잘 이해하려면 CSS 트릭에 대한 내 게시물을 확인하는 것이 좋습니다.
<head> 에 스타일 추가:
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> </body> 태그를 닫기 직전에 스크립트를 추가하고 AOS를 초기화합니다.
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > aos 패키지를 설치합니다:
yarn add aos@nextnpm install --save aos@next스크립트, 스타일 가져오기 및 AOS 초기화:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;제대로 작동하려면 빌드 프로세스에서 스타일 로더를 구성하고 이를 모두 올바르게 번들링했는지 확인해야 합니다. 그러나 Parcel을 사용하는 경우 제공된 대로 즉시 작동합니다.
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos 속성을 사용하여 애니메이션을 설정합니다. < div data-aos =" fade-in " > </ div > 그리고 data-aos-* 속성을 사용하여 동작을 조정합니다.
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >모든 애니메이션, 이징, 앵커 배치의 전체 목록 보기
요소별로만 사용할 수 있는 설정도 있습니다.
data-aos-anchor - 오프셋이 실제 애니메이션 대신 애니메이션을 트리거하는 데 사용되는 요소입니다.예:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >이 방법을 사용하면 한 요소에서 애니메이션을 실행하면서 다른 요소로 스크롤할 수 있습니다. 이는 고정 요소에 애니메이션을 적용하는 데 유용합니다.
AOS 객체는 전역 변수로 노출됩니다. 현재 사용 가능한 세 가지 방법이 있습니다.
init - AOS 초기화refresh - 요소의 모든 오프셋과 위치를 다시 계산합니다(창 크기 조정 시 호출됨).refreshHard - AOS 요소로 배열을 다시 초기화하고 refresh 트리거합니다( aos 요소와 관련된 DOM 변경 시 호출됨).실행 예:
AOS . refresh ( ) ; 기본적으로 AOS는 DOM 변경 사항을 감시하며, 비동기식으로 로드된 새 요소가 있거나 DOM에서 항목이 제거되면 자동으로 refreshHard 호출합니다. IE와 같이 MutationObserver 지원하지 않는 브라우저에서는 AOS.refreshHard() 직접 호출해야 할 수도 있습니다.
refresh 메서드는 AOS 요소로 새 저장소를 구축할 필요가 없고 최대한 가벼워야 하기 때문에 창 크기 조정 등에서 호출됩니다.
AOS는 요소가 애니메이션으로 표시되거나 사라질 때마다 문서에서 aos:in 및 aos:out 이라는 두 가지 이벤트를 전달하므로 JS에서 추가 작업을 수행할 수 있습니다.
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; data-aos-id 속성을 설정하여 AOS에 특정 요소에 대한 맞춤 이벤트를 트리거하도록 지시할 수도 있습니다.
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >그런 다음 두 가지 맞춤 이벤트를 수신할 수 있습니다.
aos:in:super-duperaos:out:super-duper때로는 내장된 애니메이션만으로는 충분하지 않을 때가 있습니다. 해상도에 따라 다른 애니메이션을 가지려면 하나의 상자가 필요하다고 가정해 보겠습니다. 방법은 다음과 같습니다.
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}그런 다음 HTML에서 사용하십시오.
< div data-aos =" new-animation " > </ div >요소는 모바일 장치의 불투명도에만 애니메이션을 적용하지만 768px 너비에서는 오른쪽에서 왼쪽으로 슬라이드됩니다.
애니메이션과 마찬가지로 맞춤 이징을 추가할 수 있습니다.
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}내장 애니메이션의 기본 거리는 100px입니다. SCSS를 사용하는 한 이를 재정의할 수 있습니다.
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; 그러나 사전에 node_modules 에서 스타일을 가져올 수 있도록 빌드 프로세스를 구성해야 합니다.
AOS의 기본 동작을 변경하고 스크롤 시 data-aos 내부에 배치된 클래스 이름을 적용하려면 animatedClassName 사용하세요.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; 위 요소는 animated 과 fadeInUp 두 가지 클래스를 갖게 됩니다. 위 세 가지 설정의 다양한 조합을 사용하면 외부 CSS 애니메이션 라이브러리를 통합할 수 있습니다.
그러나 외부 라이브러리는 실제 애니메이션 이전의 애니메이션 상태에 크게 신경 쓰지 않습니다. 따라서 스크롤하기 전에 해당 요소가 표시되지 않도록 하려면 비슷한 스타일을 추가해야 할 수도 있습니다.
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delay기간 및 지연은 50ms 단계에서 50에서 3000 사이의 값을 허용합니다. 이는 CSS에서 처리하기 때문이며 CSS를 이전보다 더 길게 만들지 않기 위해 하위 집합만 구현했습니다. 나는 이것이 대부분의 경우를 다루어야 한다고 믿습니다.
그렇지 않은 경우 다른 기간을 추가하는 간단한 CSS를 작성할 수 있습니다. 예를 들면 다음과 같습니다.
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} 이 코드는 AOS 요소에 설정하거나 AOS 스크립트를 초기화하는 동안 전역 기간으로 설정할 수 있는 4000ms 기간을 추가합니다. double [data-aos][data-aos] 에 주목하세요. 거기에 추악한 "!important"를 쓸 필요 없이 개별 설정을 전역 설정보다 더 중요하게 만드는 것은 실수가 아닙니다. 트릭입니다. :)
사용 예:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > 페이드 애니메이션:
뒤집기 애니메이션:
슬라이드 애니메이션:
줌 애니메이션:
버그를 발견하셨거나, 질문이나 아이디어가 있으시면 AOS 기여 가이드를 확인하시고, 주저하지 마시고 새로운 이슈를 만들어주세요.
