[javascript] Hammer.js를 사용하여 슬라이드 닫기 기능을 구현하는 방법은?

27 Nov 2023

javascript

Hammer.js 라이브러리를 다운로드하고, HTML 문서에 포함시킵니다.

<script src="hammer.min.js"></script>

슬라이드 엘리먼트를 선택하고 Hammer.js 인스턴스를 생성합니다.

const slideElement = document.getElementById('slide');
const hammer = new Hammer(slideElement);

슬라이드를 닫는 동작을 설정합니다. 간단하게 swipeleft 이벤트를 사용해보겠습니다.

hammer.on('swipeleft', () => {
  // 슬라이드를 닫는 코드 작성
});

슬라이드를 닫는 코드에서 원하는 동작을 구현합니다. 예를 들어, 슬라이드를 화면 밖으로 이동시키는 애니메이션을 추가할 수 있습니다.

hammer.on('swipeleft', () => {
  slideElement.style.animation = 'slide-out 0.5s forwards';

  // 애니메이션이 끝난 후에 슬라이드를 실제로 닫는 코드를 추가합니다.
  setTimeout(() => {
    slideElement.style.display = 'none';
  }, 500);
});

위의 코드는 Hammer.js를 사용하여 슬라이드 닫기 기능을 구현하는 간단한 예시입니다. 필요에 따라 여러 이벤트와 애니메이션을 조합하여 고급 기능을 구현할 수 있습니다.

참고 자료: