이미지 슬라이더는 웹사이트에서 많이 사용되는 기능 중 하나입니다. 사용자에게 다양한 이미지를 보여주고 싶을 때 유용하게 사용됩니다. 이번 블로그 포스트에서는 자바스크립트의 애니메이션 프레임을 활용하여 간단한 이미지 슬라이더 애니메이션을 만드는 방법을 알아보겠습니다.

HTML 구조

먼저, HTML 구조를 설계해야 합니다. 이미지 슬라이더를 위해 다음의 HTML 코드를 사용할 수 있습니다.

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

위 코드에서는 각 이미지를 img 태그로 감싸고, 이미지 슬라이더 전체를 감싸는 div 태그에 slider 클래스를 추가했습니다.

CSS 스타일링

이미지 슬라이더를 스타일링하기 위해 CSS 코드를 추가해보겠습니다.

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

위 코드에서는 slider 클래스의 너비와 높이를 설정하고, 이미지가 너무 커질 경우를 대비하여 overflow: hidden 속성을 추가했습니다. 이미지의 크기는 img 태그의 너비와 높이를 100%로 설정하며, 이미지가 부드럽게 전환되도록 transition 속성을 추가했습니다.

자바스크립트 애니메이션 프레임

이제 자바스크립트를 사용하여 이미지를 슬라이딩하는 애니메이션을 만들어보겠습니다.

const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function slideNext() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}

setInterval(slideNext, 3000);

위 코드에서는 slider 클래스로 선택된 요소와 모든 이미지를 선택하는 img 태그를 변수로 할당합니다. currentIndex 변수는 현재 보여지고 있는 이미지의 인덱스를 저장합니다.

slideNext 함수는 다음 이미지로 슬라이딩하는 역할을 합니다. currentIndex 값을 증가시키고, 이미지의 개수를 초과하는 경우 첫 번째 이미지로 되돌립니다. 그리고 slider 요소의 transform 속성을 이용하여 이미지를 슬라이딩합니다.

마지막으로, setInterval 함수를 사용하여 slideNext 함수를 3초마다 실행합니다.

마무리

위의 코드를 HTML 파일에 추가하고 실행해보면 이미지 슬라이더 애니메이션을 구현할 수 있습니다. 자바스크립트의 애니메이션 프레임을 사용하면 부드러운 슬라이딩 효과를 구현할 수 있으며, 다양한 스타일링과 기능을 추가하여 웹사이트에 맞게 커스터마이징할 수 있습니다.

이렇게하여 우리는 자바스크립트를 활용한 이미지 슬라이더 애니메이션을 만드는 방법을 알아보았습니다. 다른 기능을 추가하거나 스타일을 변경하여 더욱 흥미로운 이미지 슬라이더를 만들어 보세요!

참고 자료: MDN Web Docs