2段階スライドショーを実装してみよう!

今回はキービジュアルで2つのアニメーションを同時に実装する方法を最近行ったので
ソースを備忘録として残しておこうと思います。

具体的にどういったものかといいますと、それが下記!

See the Pen 2段階スライドショー by sayuri (@giraffeweb) on CodePen.light

上記はデザイナーなら一度は使ったことがあるであろう『swiper』を使用して実装しています。
ここではswiperの使い方は詳しく解説しませんので、swiperを使用したことがない方はswiperの使い方から
他の方のブログで見てみたほうが分かりやすいかと思います。

基本的にはスライド部分でswiperを使用して、その他のアニメーションはCSS3を使用しますので
複雑なことは行いません。

では早速ソースから!
当たり前ですが、jQueryやらなんやらを読み込みます。
私はswiper自体もCDN(外部サイト)から引っ張ってきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

それぞれをhead部分に読み込ませたらhtmlを記述します。

<div id="key_wrap">
  <div class="slider">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.jpeg" alt="sample">
          </div>
          <div class="slide-subimg">
            <img src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide03.jpeg" alt="sample">
          </div>
        </div>
        <!-- slide1枚目 -->
        <div class="swiper-slide">
          <div class="slide-img">
            <img src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide04.jpeg" alt="sample">
          </div>
          <div class="slide-subimg">
            <img src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide05.jpeg" alt="sample">
          </div>
        </div>
        <!-- slide2枚目 -->
       </div>
    </div>
  </div>
</div>

デモでもあるように、今回は2つの異なる画像を拡大・縮小させながらスライドさせますので、
swiperの実装方法と合わせて画像を2枚仕込みます。

CSSは参考程度に見て置いてください。
みなさんの好きな方法でデザインしてね★

あたりまえですが、上記HTMLでクラスやIDを変更する場合はCSSも変更してください。
下記はSCSSでのご紹介になっています。
CSSを使用してるかたは、オンラインサービスツールなどを使用してCSSに戻してくださいね。

#key_wrap {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	.slider {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		.swiper-container {
			height: 100%;
			overflow: hidden;
			position: relative;
		}
		.slide-subimg {
			position: absolute;
			top: 50%;
			left: 5%;
			width: 50%;
			height: auto;
			border-radius: 50%;
			z-index: 100;
			overflow: hidden;
		}
		.swiper-slide-active .slide-img,
		.swiper-slide-duplicate-active .slide-img,
		.swiper-slide-prev .slide-img{
		  animation: zoomOut 10s linear 0s 1 normal both;  
		}
		.swiper-slide-active .slide-subimg,
		.swiper-slide-duplicate-active .slide-subimg,
		.swiper-slide-prev .slide-subimg{
			img {
				animation: zoomIn 10s linear 0s 1 normal both;
			}
		}
	}
}

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

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

はい、で見てもらったら分かる通り拡大・縮小の動き自体は@keyframesを使用して
行ってます。
なのでことなるアニメーションを使用すればいろんな動きが実装できます。

最後にswiperを動かくJSを記述します。
これについても詳しくはswiperの使い方を調べて好きにオプションを追加して
やってみてください~!

$(document).ready(function () {
   setTimeout(function() {
      let swipeOption = {
               loop: true,
               effect: 'fade',
               autoplay: {
               delay: 3000,
               disableOnInteraction: false,
            },
          speed: 2000,
        }
          new Swiper('#key_wrap .swiper-container', swipeOption);
      }, 3000);
});

それでは!