今回はキービジュアルで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="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.jpeg" alt="sample">
</div>
<div class="slide-subimg">
<img src="https://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="https://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide04.jpeg" alt="sample">
</div>
<div class="slide-subimg">
<img src="https://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);
});
それでは！