swiperを使用してズームしながらフェードアウトしてみた

今回はswiperとCSSを使用してゆっくり拡大しながらフェードアウトする方法を
ご紹介します。

まずはデモから。

See the Pen
swiperでフェードイン by sayuri (@giraffeweb)
on CodePen.0

それではそれぞれのソースを紹介しますね。
HTMLは通常どおりです。figure部分はdivでもOK！

<section id="sectionGallery">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <figure>
          <img src="https://drive.google.com/uc?export=view&id=1zWiG_oZTQaj7YL6dMoL3emnCwEC6T3KK" alt="">
        </figure>
      </div>
    </div>
  </div>
</section>

次にCSSです。CSSアニメーションを使用してズーム処理を行っています。

.swiper-slide-active,
.swiper-slide-duplicate-active,
.swiper-slide-prev{
  figure {
    animation: zoom 10s linear 0s 1 normal both;
  } 
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

最後にswiperのJSです。
デフォルの処理がスライドになっているのでフェードに変更してください。

let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
}
new Swiper('.swiper-container', swipeOption);

以上でおわり！
簡単ですよね。みなさんもぜひ試してみてください。

Share: