[javascript] 이미지 슬라이더에서 이미지에 캡션 애니메이션 효과 추가하기

12 Dec 2023

javascript

이미지 슬라이더에 이미지 캡션에 애니메이션 효과를 추가하여 사용자들의 시선을 끄도록 하는 기능을 구현하는 방법에 대해 소개하고자 합니다.

구현 방법

HTML 마크업 작성

<div class="slider-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <div class="caption">Caption 1</div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <div class="caption">Caption 2</div>
  </div>
  <!-- 추가 이미지 및 캡션 -->
</div>

CSS 스타일 적용

.caption {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  transition: all 0.5s;
}
   
.slide:hover .caption {
  bottom: 10px;
}

JavaScript로 애니메이션 추가

const slides = document.querySelectorAll('.slide');
   
slides.forEach(slide => {
  slide.addEventListener('mouseenter', () => {
    slide.querySelector('.caption').style.bottom = '10px';
  });
  slide.addEventListener('mouseleave', () => {
    slide.querySelector('.caption').style.bottom = '20px';
  });
});

결과

위의 예제 코드를 이용하면 이미지 슬라이더에 마우스 호버 또는 터치시 이미지 캡션에 애니메이션 효과를 적용할 수 있습니다.

이것은 사용자에게 추가 정보를 제공하는 동시에 웹페이지의 시각적 흥미를 더해주는 효과적인 방법입니다.

이를 통해 사용자들은 더 매력적인 이미지 슬라이더를 경험하게 될 것입니다.

구현 방법

결과

참고 자료