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

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 / .append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드

.append() .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다. 문법 .append( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).append( ' 123' ); 라고 하면 <p>Lorem Ipsum Dolor 123</p> 으로 출력됩니다. 예제 1 순서 없는 목록 마지막에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

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 / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

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 / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

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 / Property / .length - 선택한 요소의 개수를 반환하는 속성

개요 .length는 선택한 요소의 개수를 반환하는 속성이다. 예를 들어 다음은 div 요소의 개수를 반환한다. $( 'div' ).length 예제 1 버튼을 클릭하면 li 요소의 개수를 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ...

jQuery / Plugin / slick / 슬라이더 플러그인

slick은 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://kenwheeler.github.io/slick/ GitHub : https://github.com/kenwheeler/slick/ 기본 사용법 jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다. 아래는 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-1920x1080-01.png" alt=""></div> <div><img src="images/slider-1920x1080-02.png" alt=""></div> <div><img src="images/slider-1920x1080-03.png" alt=""></div> <div><img src="images/slider-1920x1080-04.png" alt=""></div> ...

jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드

.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...

jQuery / .ajax() / 동기식으로 사용하는 방법

Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...