[javascript] Isotope에서 아이템들에 대한 투명도 흐리게 효과를 적용하는 방법은 무엇인가요?

01 Dec 2023

javascript

// Isotope 레이아웃 설정
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// 아이템 클릭 시 효과 적용
$('.grid-item').on('click', function() {
  // 선택된 아이템을 제외한 모든 아이템의 투명도를 조절
  $('.grid-item').not(this).css('opacity', 0.5);

  // 선택된 아이템의 효과를 적용
  $(this).css('filter', 'blur(5px)');
});

// 다른 곳을 클릭할 경우 효과 제거
$(document).on('click', function(event) {
  if (!$(event.target).closest('.grid-item').length) {
    // 모든 아이템의 투명도와 효과 제거
    $('.grid-item').css('opacity', 1);
    $('.grid-item').css('filter', 'none');
  }
});

위의 코드는 Isotope 라이브러리를 사용하여 그리드 레이아웃을 생성하고, 각 아이템에 클릭 이벤트 처리를 추가하는 방법을 보여줍니다. 클릭된 아이템을 제외한 모든 아이템의 투명도가 조절되고, 선택된 아이템에는 흐리게 효과가 적용됩니다. 또한, 다른 곳을 클릭할 경우 효과가 제거됩니다.

이 코드를 사용하면 Isotope 그리드에 투명도 효과를 적용할 수 있습니다.