[javascript] Isotope에서 아이템들에 대한 변형 효과를 적용하는 방법은 무엇인가요?

01 Dec 2023

javascript

먼저, Isotope를 HTML 문서에 추가하고 필요한 CSS 스타일을 로드합니다. 그런 다음, isotope 클래스를 가진 컨테이너 요소를 만들고 내부에 변형하려는 아이템들을 추가합니다.

<div class="isotope">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
  <!-- 추가적인 아이템들 -->
</div>

그런 다음, JavaScript에서 Isotope를 초기화하고 변형 효과를 적용할 수 있습니다. 아래의 예제 코드는 Isotope를 사용하여 마우스 오버 이벤트에 따라 아이템의 크기를 조정하는 방법을 보여줍니다.

var container = document.querySelector('.isotope');
var iso = new Isotope(container, {
  itemSelector: '.item',
  masonry: {
    columnWidth: 200 // 아이템의 기본 가로 길이
  }
});

// 마우스 오버 시 아이템의 크기 조정
container.addEventListener('mouseover', function(event) {
  if (event.target.matches('.item')) {
    event.target.style.width = '400px';
    iso.layout(); // 레이아웃 다시 계산
  }
});

// 마우스 이탈 시 아이템의 크기 원래대로 복원
container.addEventListener('mouseout', function(event) {
  if (event.target.matches('.item')) {
    event.target.style.width = '200px';
    iso.layout(); // 레이아웃 다시 계산
  }
});

이 예제는 아이템에 대한 간단한 변형 효과를 보여줍니다. Isotope는 다양한 변형 효과와 옵션을 제공하므로, 원하는 변형을 적용하는 방법은 해당 라이브러리의 문서를 참조하는 것이 좋습니다.