jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS

세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 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

애니메이션 효과 예제는 https://michalsnik.github.io/aos/에서 볼 수 있습니다. 스크롤해서 밑으로 내려가면 요소가 애니메이션 효과와 함께 나타납니다.

https://github.com/michalsnik/aos에서 소스코드를 다운로드하고 자세한 사용법을 볼 수 있습니다.

예제

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

data-aos="fade-up"의 fade-up을 flip-up, slide-up 등으로 변경하면 애니메이션 효과가 바뀝니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Script</title>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      $( document ).ready( function() {
        AOS.init();
      } );
    </script>
    <style>
      body { margin: 0px; font-family: Consolas, monospace; }
      .a { height: 100vh; background-color: #eeeeee; }
      .b { display: inline-block; width: 300px; height: 300px; margin: 0px 40px; background-color: #000000; }
    </style>
  </head>
  <body>
    <div class="a">
      Scroll
    </div>
    <div style="padding: 200px 0px;">
      <div data-aos="fade-up" class="b">
        Fade Up
      </div>
    </div>
  </body>
</html>

애니메이션 효과 세부 설정

위치, 애니메이션 속도, 지속 시간 등을 세세하게 정하고 싶다면 다음처럼 속성을 추가합니다.

<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>

delay와 duration은 0부터 3000까지 가능하고, 50 단위로 설정합니다.

같은 카테고리의 다른 글
jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

jQuery / Method / .clone() - 선택한 요소를 복제하는 메서드

.clone() .clone()은 선택한 요소를 복제합니다. 문법 .clone( ) 예를 들어 $( '.ab' ).clone().appendTo( 'h1' ); 은 ab를 클래스 값으로 가지는 요소를 복제하여 h1 요소에 넣습니다. 예제 span 요소를 복제하여 h1 태그 안에 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / 천 단위 쉼표 만드는 방법

jQuery / 천 단위 쉼표 만드는 방법

예제 1 텍스트로 출력된 숫자에 천 단위 쉼표를 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( '#jb' ).text( ...

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드

.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

jQuery / Method / .appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드

.appendTo() .appendTo()는 선택한 요소를 다른 요소 안에 넣습니다. 문법 .appendTo( target ) 예를 들어 $( 'p' ).appendTo( 'blockquote' ); 는 p 요소를 blockquote 요소 안으로 이동시킵니다. 예제 abc를 클래스 값으로 가지는 span 요소를 h1 요소 안으로 이동시킵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

.removeClass() .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...