[javascript] Hammer.js를 사용하여 터치 이벤트를 슬라이드 메뉴에 적용하는 방법은?

27 Nov 2023

javascript

Hammer.js 라이브러리를 다운로드하고 프로젝트에 추가합니다.
```
<script src="path/to/hammer.min.js"></script>
```
HTML 요소에 터치 이벤트를 적용할 준비를 합니다. 예를 들어, 슬라이드 메뉴를 적용하기 위해 다음과 같은 HTML을 가지고 있다고 가정합니다.
```
<div id="sliding-menu">
  <div class="menu-item">메뉴 1</div>
  <div class="menu-item">메뉴 2</div>
  <div class="menu-item">메뉴 3</div>
</div>
```

JavaScript 파일에서 Hammer.js를 사용하여 터치 이벤트를 처리합니다. 다음은 슬라이드 메뉴에서 스와이프 제스처를 처리하는 예시입니다.

var slidingMenu = document.getElementById('sliding-menu');
var hammertime = new Hammer(slidingMenu);

hammertime.on('swipeleft', function() {
  // 왼쪽으로 스와이프되었을 때 실행할 코드
});

hammertime.on('swiperight', function() {
  // 오른쪽으로 스와이프되었을 때 실행할 코드
});

스와이프 제스처에 따라 슬라이드 메뉴가 움직이도록 코드를 추가합니다. 슬라이드 메뉴가 좌우로 이동하게 하기 위해 CSS의 transform 속성을 사용할 수 있습니다. 다음은 슬라이드 메뉴가 스와이프 제스처에 따라 이동하는 예시입니다.
```
var slidingMenu = document.getElementById('sliding-menu');
var hammertime = new Hammer(slidingMenu);
var menuWidth = slidingMenu.offsetWidth;
var currentPosition = 0;

hammertime.on('swipeleft', function() {
  currentPosition -= menuWidth;
  slidingMenu.style.transform = 'translateX(' + currentPosition + 'px)';
});

hammertime.on('swiperight', function() {
  currentPosition += menuWidth;
  slidingMenu.style.transform = 'translateX(' + currentPosition + 'px)';
});
```
이렇게 하면 Hammer.js를 사용하여 슬라이드 메뉴에 터치 이벤트를 적용할 수 있습니다. 스와이프 제스처에 따라 메뉴가 이동하도록 원하는 추가적인 로직을 구현할 수 있습니다. Hammer.js에서 제공하는 다른 제스처 이벤트 및 옵션에 대해서는 공식 문서를 참조하시기 바랍니다.