[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 슬라이더 제작 방법

29 Nov 2023

javascript

이번 글에서는 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 갖춘 슬라이더를 제작하는 방법에 대해 알아보겠습니다.

요구사항

이 슬라이더의 요구사항은 다음과 같습니다.

사용자는 슬라이더를 마우스로 드래그하여 이동할 수 있어야 합니다.
드래그 동작이 자연스러워야 하며, 애니메이션 효과가 있어야 합니다.

HTML 구조

먼저, 슬라이더를 위한 HTML 구조를 만듭니다.

<div class="slider">
  <div class="slider-track">
    <div class="slider-handle"></div>
  </div>
</div>

이 구조는 슬라이더를 감싸는 .slider 요소와 드래그할 수 있는 .slider-handle 요소를 포함합니다.

CSS 스타일링

다음으로, 슬라이더를 스타일링합니다. 여기서는 단순히 스타일을 추가하고 전반적인 레이아웃을 설정합니다. 자세한 스타일링은 필요에 따라 추가할 수 있습니다.

.slider {
  width: 500px;
  height: 20px;
  background-color: #ccc;
  position: relative;
}

.slider-track {
  width: 100%;
  height: 100%;
  background-color: #555;
}

.slider-handle {
  width: 20px;
  height: 20px;
  background-color: #f00;
  position: absolute;
}

자바스크립트 코드

이제 드래그 앤 드롭 효과를 구현하기 위해 자바스크립트와 GreenSock(TweenMax)를 사용합니다.

const handle = document.querySelector('.slider-handle');
const track = document.querySelector('.slider-track');

let isDragging = false;
let startX = 0;
let startLeft = 0;

handle.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startLeft = parseInt(window.getComputedStyle(handle).getPropertyValue('left'));
  e.preventDefault();
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const diffX = e.clientX - startX;
  const newLeft = startLeft + diffX;
  handle.style.left = newLeft + 'px';
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

// 애니메이션 효과를 위해 GreenSock 사용
function animateSlider(duration) {
  gsap.to(handle, duration, { left: '100%' });
}

animateSlider(2); // 2초 동안 슬라이더를 오른쪽 끝으로 이동

이 코드는 드래그 앤 드롭 동작을 처리하는 부분과 GreenSock을 이용한 슬라이더 애니메이션 처리를 위한 코드입니다.

결론

이렇게 자바스크립트와 GreenSock을 이용하여 드래그 앤 드롭 효과를 갖춘 슬라이더를 제작할 수 있습니다. 이를 응용하여 더 다양한 슬라이더를 만들어보세요.

목차

요구사항

HTML 구조

CSS 스타일링

자바스크립트 코드

결론

참고 자료