swiper fade In 및 시간 차 효과

HTML

<div class="swiper first">
  <div class="swiper-wrapper>
    <div class="swiper-slide>
      <div class="contents">
        <div class="text">
          <h4>swiper Fade In 효과</h4>
          <p>스와이프 페이드인 및 시간차 효과 주는 법</p>
        </div>
      </div>
    </div>
  <//div>
</div>

CSS

/* 기본 css */ 
.swiper-slide .contents .text h4 {
  font-size: 40px;
  font-weight: 700;
}
.swiper-slide .contents .text > p {
  font-size: 20px;
  line-height: 27px;
  margin: 50px 0;
}


/* .swiper-slide-active 에 애니메이션 설정 적용 */ 
.swiper-slide.swiper-slide-active .contents .text h4 {
  animation: text 1s 0.2s both;  /* name duration delay fill-mode */
}
.swiper-slide.swiper-slide-active .contents .text > p {
  animation: text 1s 0.3s both;
}

/* keyframes로 애니메이션 효과 적용 */
@keyframes text {
  0% {opacity: 0; transform: translateX(20px);}
  100% {opacity: 1; transform: translateY(0);}
}

jQuery

var swiper = new Swiper(".first", {
  slidesPerView: 1,
  spaceBetween: 20,
  effect: "fade",
  // fade 이펙트 겹침 현상 시 사용
  fadeEffect: { crossFade: true },
  speed: 300,
  mousewheel: {  // 마우스휠 허용
    invert: false,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

 

swiper의 effect:"fade"를 사용하면 슬라이드의 내용이 겹쳐지는 현상이 발생하는데 그럴때는 fadeEffect: {crossFade: true }를 적용하면 해결된다

 

적용예시

참고 사이트

*swiper Effect Fade

https://codesandbox.io/s/lb886r?file=/index.html:1887-2139 

Swiper - Effect fade - CodeSandbox

*스와이프 컨텐츠 페이드인, 시간차 효과

https://www.youtube.com/watch?v=wN5UiB3FPlE 

*페이드인 효과 시 겹침 오류

https://github.com/nolimits4web/swiper/issues/3309

Swiper 5.1 - bug when you set effect to "fade" for slide without background color (Elements overlap) · Issue #3309 · nolimits4

*키프레임 애니메이션

https://mrb18.tistory.com/entry/CSS3-animation-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[CSS3] animation 사용하기