1. Hammer.js 라이브러리를 프로젝트에 추가합니다. HTML 파일 내에 다음 코드를 추가합니다:

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

1. 이동할 엘리먼트를 선택합니다. 예를 들어, div 엘리먼트를 선택하려면 다음과 같이 작성합니다:

const element = document.querySelector('div');

1. Hammer 객체를 생성하고, 이벤트 리스너를 등록합니다. 다음 코드를 사용하여 터치 이벤트를 감지하고 화면 이동을 적용합니다:

const hammer = new Hammer(element);

hammer.on('pan', (event) => {
  // 이벤트에서 이동한 거리를 가져옵니다
  const deltaX = event.deltaX;
  const deltaY = event.deltaY;

  // 화면 이동을 적용합니다
  element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

위 코드에서 pan 이벤트는 사용자가 화면을 스와이프하거나 드래그 할 때 발생합니다. deltaX와 deltaY는 사용자의 이동 거리를 나타내며, translate() CSS 함수를 사용하여 화면 이동을 적용합니다.

1. 필요에 따라 다른 Hammer 이벤트를 사용하여 화면 이동에 추가적인 동작을 적용할 수 있습니다. 예를 들어, pinch, rotate, press 등의 이벤트를 사용할 수 있습니다.

이제 Hammer.js를 사용하여 터치 이벤트를 화면 이동에 적용할 수 있습니다. Hammer.js는 다양한 터치 기반 동작을 지원하므로, 앱이나 웹사이트에서 편리하게 사용할 수 있습니다.

참고 자료:

• Hammer.js 공식 문서
• Hammer.js 예제 코드