스크롤하면 애니메이션 효과와 함께 표시하는 라이브러리 / AOS

AOS 라이브러리(Animate on scroll library)는 스크롤 하면 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. 스크롤해서 밑으로 내려가면 요소가 애니메이션 효과와 함께 나타납니다.
2 min read
스크롤하면 애니메이션 효과와 함께 표시하는 라이브러리 / AOS

AOS

AOS 라이브러리(Animate on scroll library)는 스크롤 하면 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다.세로로 긴 웹 페이지에서 요소가 화면을 벗어날 때 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다.

사용 가능한 애니메이션 속성

  • Fade animations
    • fade
    • fade-up
    • fade-down
    • fade-left
    • fade-right
    • fade-up-right
    • fade-up-left
    • fade-down-right
    • fade-down-left
  • Flip animations
    • flip-up
    • flip-down
    • flip-left
    • flip-right
  • Slide animations
    • slide-up
    • slide-down
    • slide-left
    • slide-right
  • Zoom animations
    • 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

애니메이션 효과 세부 설정

  • 위치, 애니메이션 속도, 지속 시간 등을 세세하게 정하고 싶다면 다음처럼 속성을 추가합니다.
  • 스크롤해서 밑으로 내리면 요소가 애니메이션 효과와 함께 나타납니다.
  • delay와 duration은 0부터 3000까지 가능하고, 50 단위로 설정합니다.
<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>

 

예제

다음은 AOS를 적용한 간단한 예제입니다. CDN을 제공하므로 소스코드를 다운로드 하지 않아도 사용 가능하고, jQuery가 필요합니다.

You may like these posts

  • .slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.   기본형 .slideUp( [duration ] [, easing ] [, complete ] )   duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기…
  • .slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.   기본형 .slideDown( [ duration ] [, easing ] [, complete ] )   duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1…
  • .scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다.   기본형 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 …
  • .slice() .slice()는 일치하는 요소의 일부분만 선택합니다.   기본형 .slice( start [, end ] ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' )…
  • .text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.   기본형 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var abc = $( 'h1' )…
  • .slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.   기본형 .slideToggle( [ duration ] [, easing ] [, complete ] )   d…

Post a Comment