Colin's Blog
[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 효과를 사용한 이미지 슬라이더 구현 방법

이미지 슬라이더는 웹 사이트에서 많이 사용되는 인터랙티브한 요소 중 하나입니다. 이번 블로그 포스트에서는 자바스크립트와 GreenSock 라이브러리를 사용하여 드래그 앤 드롭 효과를 가진 이미지 슬라이더를 구현하는 방법에 대해 알아보겠습니다.

1. GreenSock 라이브러리 설치하기

먼저, GreenSock 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 GreenSock의 TweenMax 라이브러리를 설치할 수 있습니다.

npm install gsap

2. HTML 구조 설정하기

이미지 슬라이더를 위한 HTML 구조를 설정합니다. 아래는 예시입니다.

<div class="slider">
  <div class="slider-container">
    <div class="slide">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

3. CSS 스타일 추가하기

이미지 슬라이더의 CSS 스타일을 추가합니다. 슬라이더 컨테이너의 너비를 슬라이드의 너비에 따라 동적으로 조정하기 위해 flex 및 overflow 속성을 사용합니다. 아래는 예시입니다.

.slider {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slider-container {
  display: flex;
  width: 100%;
}

.slide {
  flex: 0 0 100%;
}

4. 자바스크립트 코드 작성하기

이제 드래그 앤 드롭 효과를 위한 자바스크립트 코드를 작성합니다. 먼저, 슬라이드 컨테이너를 선택하고 드래그 이벤트를 처리하기 위한 이벤트 리스너를 추가합니다.

const sliderContainer = document.querySelector('.slider-container');
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;

sliderContainer.addEventListener('mousedown', startDrag);
sliderContainer.addEventListener('mouseup', endDrag);
sliderContainer.addEventListener('mouseleave', endDrag);
sliderContainer.addEventListener('mousemove', drag);

마우스 클릭 이벤트가 발생했을 때 시작 위치를 저장하고 드래그 중인 상태를 설정합니다. 드래그가 시작되면 애니메이션을 중지합니다.

function startDrag(event) {
  event.preventDefault();
  startPos = getTranslateX(event.clientX);
  isDragging = true;
  animationID = requestAnimationFrame(animation);
}

마우스가 이동하는 동안에는 현재 위치를 계산하고 슬라이드 컨테이너를 이동시킵니다.

function drag(event) {
  if (isDragging) {
    const currentPosition = getTranslateX(event.clientX);
    currentTranslate = prevTranslate + currentPosition - startPos;
    setTranslateX(currentTranslate);
  }
}

드래그가 끝나면 애니메이션을 재개하고 드래그 상태와 이전 위치를 초기화합니다.

function endDrag() {
  isDragging = false;
  cancelAnimationFrame(animationID);
  prevTranslate = currentTranslate;
}

이렇게 구현된 드래그 앤 드롭 효과를 가진 이미지 슬라이더는 GreenSock의 TweenMax 라이브러리를 사용하여 애니메이션을 부드럽게 적용할 수 있습니다.

5. GreenSock을 이용한 애니메이션 적용하기

GreenSock의 TweenMax 라이브러리를 사용하여 슬라이드 컨테이너를 애니메이션으로 이동시키는 효과를 적용할 수 있습니다. 아래는 예시 코드입니다.

function setTranslateX(position) {
  sliderContainer.style.transform = `translateX(${position}px)`;
}

function getTranslateX(clientX) {
  return clientX - sliderContainer.getBoundingClientRect().left;
}

function animation() {
  setTranslateX(currentTranslate);
  if (isDragging) {
    animationID = requestAnimationFrame(animation);
  }
}

위의 코드에서 setTranslateX 함수는 슬라이드 컨테이너의 위치를 설정합니다. getTranslateX 함수는 마우스 위치를 현재 슬라이드 컨테이너 내에서의 상대적인 위치로 변환합니다. animation 함수는 애니메이션을 부드럽게 업데이트하고 드래그 중인 경우에만 애니메이션을 반복합니다.

결론

이렇게 자바스크립트와 GreenSock을 사용하여 드래그 앤 드롭 효과를 가진 이미지 슬라이더를 구현할 수 있습니다. 이를 통해 사용자들은 손쉽게 이미지를 넘기고 선택할 수 있게 되며, 웹 사이트에 인터랙티브한 요소를 추가할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.