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

jQuery
Created 2021-01-19 Last Modified 2021-01-19

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

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...

jQuery / Method / .submit() - 폼 전송 이벤트

.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다. select 선택 시 바로 폼 전송 select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다. <!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 / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자

:odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 다음은 홀수 인덱스인 p 요소를 선택한다. 주의할 점은 인덱스가 0부터 시작한다는 것이다. $( 'p:odd' ) 예제 인덱스가 홀수인 li 요소를 선택하고, 글자색을 빨간색으로 바꾼다. <!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 / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킨다. 문법 .before( content ) 다음은 h1 요소 앞에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).before( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 앞에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ).before( $( 'p.b' ) ); 예제 ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

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

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth

jQuery의 width, innerWidth, outerWidth로 특정 요소의 가로 크기를 가져올 수 있습니다. width - padding 안쪽 크기 innerWidth - border 안쪽 크기 outerWidth - border 포함 크기 다음은 padding과 margin을 추가하면서 각 값이 어떻게 변하는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 체크박스 모두 선택, 모두 선택 해제 만들기

<!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() { $( '.check-all' ).click( function() { ...

jQuery / Method / .toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드

.toggle() .toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다. 문법 .toggle( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 ...