[javascript] Hammer.js를 사용하여 터치 이벤트를 화면 플리킹에 적용하는 방법은?

27 Nov 2023

javascript

아래는 Hammer.js를 사용하여 화면 플리킹에 터치 이벤트를 적용하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hammer.js Example</title>
    <script src="https://hammerjs.github.io/dist/hammer.js"></script>
    <style>
        #container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #content {
            width: 600px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <!-- 플리킹할 내용을 추가 -->
        </div>
    </div>
    <script>
        var container = document.getElementById('container');
        var content = document.getElementById('content');

        var mc = new Hammer.Manager(container);
        mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL }));

        var posX = 0;
        var currentX = 0;

        mc.on('panstart', function (e) {
            posX = currentX;
        });

        mc.on('panmove', function (e) {
            currentX = posX + e.deltaX;
            content.style.transform = 'translateX(' + currentX + 'px)';
        });

        mc.on('panend', function (e) {
            posX = currentX;
        });
    </script>
</body>
</html>

위의 예제 코드에서는 Hammer.js를 사용하여 터치 이벤트를 캡처하고, pan 이벤트를 통해 플리킹 효과를 구현합니다. panstart 이벤트에서 현재 위치를 저장하고, panmove 이벤트에서 현재 위치와 이동한 거리를 계산하여 transform 속성을 이용해 내용을 이동시킵니다. 마지막으로, panend 이벤트에서 현재 위치를 업데이트합니다.

이제 위의 코드를 사용하여 화면에 플리킹 효과를 적용할 수 있습니다. Hammer.js의 다양한 제스처 인식기와 이벤트를 활용하여 더 복잡한 동작을 구현할 수도 있습니다. Hammer.js는 사용하기 쉬우며, 문서화된 API와 다양한 예제를 제공하므로, 자세한 내용은 공식 문서를 참조해주세요.