[javascript] 이미지 슬라이더에서 이미지에 확대/축소 애니메이션 효과 추가하기

12 Dec 2023

javascript

이미지 슬라이더는 웹사이트나 애플리케이션에서 많이 사용되는 요소 중 하나입니다. 사용자들이 다양한 이미지를 쉽게 살펴볼 수 있고, 시각적인 효과를 추가해 홈페이지나 웹 앱의 사용자 경험을 향상시킬 수 있습니다. 이번 블로그에서는 이미지 슬라이더에 이미지를 확대/축소하는 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

기본 이미지 슬라이더 설정

우선, HTML과 CSS를 사용하여 기본적인 이미지 슬라이더를 구성합니다. 다음은 간단한 이미지 슬라이더를 만드는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .slider-container {
      width: 100%;
      overflow: hidden;
    }
    .slider {
      display: flex;
      transition: transform 0.5s ease;
    }
    .slide {
      min-width: 100%;
    }
  </style>
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <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>
</body>
</html>

이 코드는 이미지 슬라이더를 나타내는 기본 구조입니다. 슬라이드의 전환 효과를 나타내기 위해 Flexbox를 사용했습니다. 이제 JavaScript를 사용하여 이미지를 확대/축소하는 애니메이션 효과를 추가해보겠습니다.

이미지 확대/축소 애니메이션 효과 추가

JavaScript의 transform을 사용하여 이미지를 확대/축소하는 애니메이션 효과를 추가할 수 있습니다. 모든 이미지 슬라이드에 click 이벤트를 추가하고, 해당 이미지를 선택한 후 확대/축소를 적용합니다.

다음은 JavaScript를 사용하여 이미지를 확대하는 예제 코드입니다.

document.querySelectorAll('.slide').forEach(slide => {
  slide.addEventListener('click', () => {
    slide.style.transform = 'scale(1.2)';
  });
});

이 코드는 각 이미지 슬라이드에 click 이벤트를 추가하고, 해당 이미지를 1.2배로 확대하도록 지정합니다. 사용자가 다시 한 번 클릭하면 이미지는 원래 크기로 돌아갑니다.

결론

이제 이미지 슬라이더에 이미지를 확대/축소하는 애니메이션 효과를 추가하는 방법을 배웠습니다. 이 기능을 통해 사용자는 이미지를 더욱 자세히 살펴볼 수 있으며, 웹사이트나 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 다양한 애니메이션 효과를 적용하여 사용자들에게 더욱 흥미로운 경험을 제공할 수 있습니다.

참고문헌: