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

27 Nov 2023

javascript

Hammer.js는 터치 이벤트를 간편하게 처리할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 사이드 메뉴에 터치 이벤트를 적용하는 방법을 알아보겠습니다.

Hammer.js 라이브러리를 다운로드하고 프로젝트에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

HTML 구조를 작성합니다. ```html

3. 자바스크립트 코드를 작성합니다.
```javascript
document.addEventListener('DOMContentLoaded', function() {
  var sidebar = document.querySelector('.sidebar');
  
  // Hammer.js 인스턴스 생성
  var hammer = new Hammer(sidebar);
  
  // 드래그 제스처 활성화
  hammer.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
  
  // 사이드 메뉴가 열리고 닫히는 애니메이션 적용
  hammer.on('panstart panend pancancel panleft panright', function(ev) {
    sidebar.style.transform = 'translateX(' + ev.deltaX + 'px)';
    
    if (ev.type === 'panend') {
      if (ev.distance > 50) {
        sidebar.classList.toggle('open');
      } else {
        sidebar.classList.remove('open');
      }
    }
  });
});

위의 코드에서 sidebar 클래스를 가진 요소를 선택하여 사이드 메뉴로 사용하고, pan 제스처를 활성화합니다. panstart, panend, pancancel, panleft, panright 이벤트를 감지하여 사이드 메뉴의 위치를 조정하고, 제스처 종료 시 사이드 메뉴를 열고 닫는 애니메이션을 적용합니다.

위의 코드에서는 CSS 애니메이션을 사용하지 않고 요소의 translateX 속성을 변경하여 사이드 메뉴의 이동을 처리하였으니, 필요한 경우 CSS로 애니메이션 효과를 추가하는 것이 좋습니다.