[HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과

 

Swiper 슬라이더를 활용한 부드러운 애니메이션

 

 

 

Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다.

참고: https://swiperjs.com/swiper-api#parameters

이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다.

 

 

각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다.

.item {
  width: 100%;
  height: 100%;
  padding-top: 2.5rem;
  filter: grayscale(0.8);
 }

position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다.

 

 

이제 active 클래스에 변화를 줄 차례입니다.

.swiper-slide-active {
  .item {
    padding-top: 0;
    filter: grayscale(0);
    .item__inner {
      .item__front {height: calc(320px + 2.5rem);}
      .item__back,
      .front__tit {animation: fadeUp .5s linear;-webkit-animation: fadeUp .5s linear;}
    }
  }
}

흑백 필터를 없애서 채도를 올렸습니다.

높이에 차이를 주기 위해 높이값을 살짝 손봤습니다. padding-top이 사라진 만큼 높이를 늘려준 것입니다.

그리고 배경 div와 텍스트에 fadeUp이라는 키프레임 애니메이션을 만들어 자연스럽게 바운스 되며 나타나게 했습니다.

 

키프레임 애니메이션입니다

translateY값을 0에서 10px 내려갔다가 다시 0으로 돌아오게 만들었습니다.

투명도는 0.1에서 1로 서서히 나타나게 했습니다.

transform에 prefix를 더해 호환성을 챙겼구요

@keyframes fadeUp {
  0% {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.1
  }
  50% {
    -moz-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0.5;
  }
  100% {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

 

 

그리고 모든 요소에 transition을 주어 이 모든 CSS 변화를 부드럽게 이어지게 만들어줍니다.

*{-webkit-transition:all .5s;transition:all 0.5s;}

 

 

결과물은 아래와 같습니다

 

@코드펜

See the Pen Swiperjs active class by sel (@wimmwell) on CodePen.