[javascript] 자바스크립트 애니메이션 라이브러리와 드래그 앤 드롭 플러그인을 결합한 웹사이트 카드 슬라이더 구현 방법

29 Nov 2023

javascript

웹사이트에 동적인 요소를 추가하기 위해 자바스크립트 애니메이션 라이브러리와 드래그 앤 드롭 플러그인을 결합하여 카드 슬라이더를 만들어 볼 것입니다. 이 예제는 JavaScript와 jQuery를 사용하여 구현됩니다.

라이브러리 설치

먼저, 사용할 자바스크립트 애니메이션 라이브러리와 드래그 앤 드롭 플러그인을 설치해야 합니다. 이 예제에서는 TweenMax 애니메이션 라이브러리와 Draggable 플러그인을 사용합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/Draggable.min.js"></script>

위의 스크립트 태그를 HTML 파일의 <head> 태그 안에 추가합니다.

HTML 구조

다음은 슬라이더에 사용될 HTML 구조입니다.

<div id="slider">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

위의 예제에서는 #slider라는 ID를 가진 부모 요소 안에 .card 클래스를 가진 자식 요소들이 있습니다.

CSS 스타일링

슬라이더의 스타일링을 위해 CSS를 추가합니다.

#slider {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.card {
  flex: 0 0 300px;
  height: 200px;
  background-color: #f1f1f1;
  margin-right: 10px;
}

위의 CSS 코드는 슬라이더가 가로로 나열되고, 넘치는 부분은 숨김 처리되도록 설정합니다. 각 카드는 300px의 너비와 200px의 높이를 가지며, 오른쪽에는 10px의 마진이 적용됩니다.

JavaScript 코드

이제 JavaScript 코드를 작성하여 애니메이션과 드래그 앤 드롭 기능을 구현해 보겠습니다.

// 카드 슬라이더 요소 선택
const slider = document.getElementById('slider');
const cards = document.querySelectorAll('.card');

// 카드 슬라이더 애니메이션 초기화
gsap.to(cards, { x: i => i * 310, duration: 0.5, ease: 'power2.out' });

// 카드 슬라이더 드래그 앤 드롭 기능 추가
Draggable.create(slider, {
  type: 'x',
  edgeResistance: 0.5,
  bounds: '#slider',
  snap: 'x',
  snapSpacing: 310,
});

위의 JavaScript 코드는 다음 작업을 수행합니다:

카드 슬라이더 요소와 카드 요소를 선택하여 변수에 할당합니다.
gsap.to()를 사용하여 카드 슬라이더의 애니메이션을 초기화합니다. 각 카드는 인덱스에 따라 x축으로 310px만큼 이동합니다. 이 애니메이션은 0.5초 동안 진행되며, power2.out 이징 함수가 적용됩니다.
Draggable.create()를 사용하여 카드 슬라이더에 드래그 앤 드롭 기능을 추가합니다. 카드 슬라이더는 x축으로만 이동할 수 있으며, 가장자리 저항성이 0.5로 설정되어 스크롤할 때 부드럽게 이동합니다. snap 옵션을 사용하여 카드들이 그리드에 정렬되도록 설정합니다. 그리드의 간격은 310px로 지정합니다.

결과 확인

웹 브라우저에서 HTML 파일을 열어 결과를 확인해 보세요. 카드 슬라이더는 화면에 보이는 카드를 드래그하여 이동할 수 있으며, 애니메이션을 통해 보기 좋게 이동합니다.

이제 자바스크립트 애니메이션 라이브러리와 드래그 앤 드롭 플러그인을 활용하여 동적인 웹사이트 카드 슬라이더를 구현하는 방법을 알게 되었습니다. 이를 통해 사용자와 상호작용할 수 있는 멋진 웹 요소를 만들어 보세요!

참고 자료: