[javascript] jQuery를 사용하여 스크롤 애니메이션 및 요소 출력하기

01 Dec 2023

javascript

웹 개발에서 스크롤 애니메이션 및 요소 출력은 매우 흔한 기능입니다. 이 기능을 구현하기 위해 jQuery를 사용하면 손쉽게 구현할 수 있습니다. 이 글에서는 jQuery를 사용하여 스크롤 애니메이션 및 요소 출력을 구현하는 방법에 대해 알아보겠습니다.

필요한 파일 추가하기

먼저, 스크롤 애니메이션 및 요소 출력을 구현하기 위해 jQuery 및 animate.css 파일을 추가해야 합니다. jQuery는 오픈소스 자바스크립트 라이브러리로, 간단한 코드로 다양한 기능을 구현할 수 있습니다. animate.css는 다양한 CSS 애니메이션 효과를 제공하는 라이브러리입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <style>
    /* 요소의 초기 스타일 설정 */
    .element {
      opacity: 0;
    }
  </style>
</head>
<body>
  <div class="element">애니메이션 효과를 적용할 요소</div>

  <script>
    // 스크롤 이벤트 핸들러
    $(window).scroll(function() {
      // 스크롤 위치 계산
      var scrollPos = $(window).scrollTop();

      // 요소가 출현해야 할 위치 계산
      var elementPos = $(".element").offset().top;

      // 스크롤 위치와 요소의 위치 비교
      if (scrollPos > elementPos - $(window).height()/2) {
        $(".element").addClass("animate__animated animate__fadeInUp");
      }
    });
  </script>
</body>
</html>

코드 설명

jQuery와 animate.css 파일을 <head> 내에 추가합니다.
element 클래스를 가진 요소의 초기 스타일을 opacity: 0;으로 설정합니다. 이로써 요소가 초기에는 보이지 않게 됩니다.
$(window).scroll() 함수는 스크롤 이벤트 핸들러입니다. 스크롤이 발생할 때마다 함수가 실행됩니다.
$(window).scrollTop() 함수는 현재 스크롤 위치를 계산합니다.
$(".element").offset().top은 .element 클래스를 가진 요소의 위치를 계산합니다.
스크롤 위치와 요소 위치를 비교하여 스크롤 위치가 요소 위치보다 크면, .element 요소에 animate__animated animate__fadeInUp 클래스를 추가합니다. 이로써 요소는 애니메이션과 함께 나타나게 됩니다.

결과 확인

위의 코드를 실행하면 페이지를 스크롤할 때마다 .element 요소가 나타나는 애니메이션 효과를 볼 수 있습니다.

마무리

이렇게 jQuery를 사용하여 스크롤 애니메이션 및 요소 출력을 구현할 수 있습니다. jQuery의 간단한 문법과 다양한 기능을 활용하면 웹 개발에서 다양한 기능을 구현할 수 있습니다. 참고 문서와 jQuery 공식 문서를 참고하여 더 많은 기능을 알아보시기 바랍니다.