[javascript] Hammer.js를 사용하여 팝업 창을 구현하는 방법은?

27 Nov 2023

javascript

Hammer.js는 터치 이벤트를 처리하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 팝업 창을 구현하는 방법을 알아보겠습니다.

Hammer.js 라이브러리를 다운로드하고 HTML 파일에 추가합니다. 다음과 같은 코드를 <head> 태그 안에 추가합니다.

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

팝업 창의 HTML 마크업을 작성합니다. 일반적으로 팝업을 감싸는 부모 요소와 팝업 내용을 담는 자식 요소로 구성됩니다. 예를 들어 다음과 같은 구조를 사용할 수 있습니다.

<div id="popupContainer">
  <div id="popupContent">
    <h2>팝업 내용</h2>
    <p>이곳에 내용을 입력하세요.</p>
  </div>
</div>

JavaScript 코드를 작성하여 Hammer.js를 사용하여 팝업 창의 동작을 구현합니다. 페이지 스크립트 파일에 다음 코드를 추가합니다.

// 팝업 창 요소를 선택합니다.
var popupContainer = document.getElementById("popupContainer");

// Hammer.js 인스턴스를 생성합니다.
var hammertime = new Hammer(popupContainer);

// 팝업 창을 드래그하여 이동하는 동작을 처리합니다.
hammertime.on("pan", function(event) {
  // 팝업 창을 이벤트의 이동 거리만큼 이동시킵니다.
  popupContainer.style.transform = "translate(" + event.deltaX + "px, " + event.deltaY + "px)";
});

// 팝업 창을 드래그가 끝나면 원래 위치로 돌아가는 동작을 처리합니다.
hammertime.on("panend", function(event) {
  // 팝업 창을 초기 위치로 되돌립니다.
  popupContainer.style.transform = "";
});

위의 코드를 사용하면 Hammer.js를 사용하여 팝업 창을 드래그하여 이동할 수 있습니다. 팝업 창을 드래그한 후 놓으면 원래 위치로 자연스럽게 돌아갑니다.

이제 팝업 창을 보다 많은 제스처로 제어하고 원하는 방식에 따라 스타일링하실 수 있습니다. Hammer.js 문서에서 다양한 이벤트 및 제스처에 대한 자세한 내용을 확인할 수 있습니다.

참조:

Hammer.js 공식 문서