[javascript] 이미지 슬라이더에 이미지 흐리게 만들기 애니메이션 추가하기

12 Dec 2023

javascript

1. HTML 구조

<div class="slider-container">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <div class="image-overlay"></div>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <div class="image-overlay"></div>
  </div>
  <!-- 추가 이미지 슬라이드 -->
</div>

2. CSS

.slider-container {
  position: relative;
  overflow: hidden;
  /* 추가 스타일 */
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
  /* 추가 스타일 */
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5); /* 투명한 흰색 */
  backdrop-filter: blur(5px); /* 이미지를 흐리게 만드는 CSS 속성 */
}

3. JavaScript

이미지 슬라이더 라이브러리를 사용하고 있다면 해당 라이브러리의 API를 활용하여 슬라이드 변경 시 애니메이션을 트리거할 수 있습니다. 예를 들어, Swiper 라이브러리를 사용하는 경우:

var mySwiper = new Swiper('.slider-container', {
  // Swiper 설정
  on: {
    slideChange: function () {
      // 슬라이드 변경될 때 마다 실행되는 함수
      // 흐리게 만들기 애니메이션 추가
      var currentSlide = this.slides[this.activeIndex];
      var overlay = currentSlide.querySelector('.image-overlay');
      overlay.style.transition = 'none';
      setTimeout(function () {
        overlay.style.transition = 'all 0.5s ease'; // 애니메이션 효과를 추가할 시간
        overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
      }, 50);
    },
  },
});

이렇게 이미지 슬라이더에 이미지를 흐리게 만들어주는 애니메이션을 추가할 수 있습니다. 이를 통해 사용자에게 더욱 매력적인 시각적 경험을 제공할 수 있습니다.