[javascript] Isotope을 사용하여 애니메이션 효과를 적용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope 라이브러리를 다운로드하거나 CDN을 통해 가져옵니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>

HTML 요소를 그리드 형태로 구성합니다. 필터링이나 정렬을 위해 각 요소에 클래스를 지정해줍니다.

<div id="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- ... -->
</div>

JavaScript에서 Isotope을 초기화하고 애니메이션 효과를 적용합니다.

$(document).ready(function() {
  // Isotope 초기화
  $('#grid').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
  });
  
  // 필터링 버튼 클릭 시
  $('.filter-button').on('click', function() {
    var filterValue = $(this).attr('data-filter');
    $('#grid').isotope({ filter: filterValue });
  });
});

필터링 버튼을 추가하여 사용자가 필터링을 할 수 있도록 합니다. 버튼에 필터링을 위한 클래스나 속성을 추가하고 JavaScript에서 클릭 이벤트를 처리합니다.

<button class="filter-button" data-filter=".category1">Category 1</button>
<button class="filter-button" data-filter=".category2">Category 2</button>
<!-- ... -->

$('.filter-button').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $('#grid').isotope({ filter: filterValue });
});

위의 코드에서는 .category1으로 필터링할 경우 해당 클래스를 가진 요소만 표시되고, .category2로 필터링할 경우 .category2 클래스를 가진 요소만 표시됩니다.

Isotope을 사용하여 요소들을 애니메이션 효과와 함께 필터링하고 정렬하는 방법에 대해서 알아보았습니다. 더 자세한 정보는 Isotope 공식 문서를 참조하시기 바랍니다.

참고 문서: Isotope - Filtering and Sorting