【css】Swiper.jsを使ってアクティブなスライドにanimationをつける

jQuery不要でsliderを実装する事ができるライブラリーSwiper.jsを使ってsliderを実装しました。

今回やりたい事は、
・Sliderで写真とテキストを表示
・アクティブなSliderに対して、写真とテキストをそれぞれスライドインアニメーションを付与する
です。

Swiper.jsのHow Toは色々な記事がありますので、ここでは記載しません。色々なオプションが豊富なので、楽にスライダーを実装したい方はぜひ使用してみてください。

＞swiper

スライドインのcssを用意

写真とテキストをスライドインさせるためのcssを記述します。

@keyframes slideInR {
      from {
        opacity: 0;
        transform: translateX(150px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
@keyframes slideInL {
  from {
    opacity: 0;
    transform: translateX(-150px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

swiperのアクティブスライド認識機能を使用する

swiperには、現在アクティブなスライドには「 swiper-slide-active 」というclass名が付与されます。
これを利用して、このclassが付与されたスライドにアニメーションを読み込むようにcssを追記します。

.swiper-slide-active .slideInR{
  animation-name: slideInR;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier;
}
.swiper-slide-active .slideInL {
  animation-name: slideInL;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier;
}