CHAKOIRO’s BLOG 関西のフリーランスWEB制作者のWEB知識備忘録 > html・CSS・JS備忘 > スライドショー：時間差で要素を出す方法（slick使用）

スライドショー：時間差で要素を出す方法（slick使用）

最終更新日：2021.10.01 [金]　公開日：2020.04.06 [月]　カテゴリー：html・CSS・JS備忘, 便利なプラグイン・ジェネレーター

Pocket

これは説明するよりもDEMOを見ていただいた方がわかりやすいと思うので早速DEMOです。

DEMO ：　https://chakoiro.net/demo/slick/slide_test.html

こちら説明するまでもないのですが、メイン画像（色ついてる背景みたいなの）が切り替わりつつ、丸い輪っかが時間差で縮んでいくのがわかるでしょうか？

このデモでは輪っかにしましたが、キャッチコピーでも別の画像でも何でも応用できると思います。

仕組みは至って簡単で・・・と言うか、力技。

Contents

1 html
2 css
3 JS

html

これは特に説明するまでもなく、sliderという大きな枠で括って、スライドの要素を並べているだけですね。

	  <section class="slider">



		<div class="mv"><!--スライド１枚目：ピンク-->
			<p class="ph"><img src="img/mv1.jpg" alt="" width="1024" height="723"></p><!--ピンク画像-->
			<p class="deco1"></p><!--輪っか左-->
			<p class="deco2"></p><!--輪っか真ん中-->
			<p class="deco3"></p><!--輪っか右-->
		</div>



		<div class="mv"><!--スライド2枚目：水色-->
			<p class="ph"><img src="img/mv2.jpg" alt="" width="1024" height="723"></p><!--水色画像-->
			<p class="deco1"></p><!--輪っか左-->
			<p class="deco2"></p><!--輪っか真ん中-->
			<p class="deco3"></p><!--輪っか右-->
		</div>


		<div class="mv"><!--スライド3枚目：グリーン-->
			<p class="ph"><img src="img/mv3.jpg" alt="" width="1024" height="723"></p><!--グリーン画像-->
			<p class="deco1"></p><!--輪っか左-->
			<p class="deco2"></p><!--輪っか真ん中-->
			<p class="deco3"></p><!--輪っか右-->
		</div>


</section>

</div>

</div>

</div>

</section>

css

これも説明するほどではなくて・・・各要素にkeyframeでアニメーションを当てているだけです。

.mv {
    position: relative;
}
.slick-active .ph {
    animation: zoom1 2s ease 0s 1 normal both;
}
	
.slick-active .deco1 {
    background-color: #ccc;
    border-radius: 300px;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 100px;
    left: 100px;
    animation: zoom2 1s ease 1s 1 normal both;
}
.slick-active .deco2 {
    background-color: #ddd;
    border-radius: 300px;
    width: 100px;
    height: 100px;
    animation: zoom3 1s ease 0.5s 1 normal both;
    position: absolute;
    top: 300px;
    left: 400px;
}
.slick-active .deco3 {
    background-color: #ddd;
    border-radius: 300px;
    width: 100px;
    height: 100px;
    animation: zoom3 1s ease 0s 1 normal both;
    position: absolute;
    top: 100px;
    left: 600px;
}
@keyframes zoom1 {
0% {
transform: scale( 1.2 );
opacity:0;
}
100% {
transform: scale( 1 );
opacity:1;
}
}
@keyframes zoom2 {
0% {
transform: scale( 3 );
opacity:0;
}
70% {
transform: scale( 2 );
opacity:1;
}
100% {
transform: scale( 1 );
opacity:0;
}
}
@keyframes zoom3 {
0% {
transform: scale( 2 );
opacity:0;
}
70% {
transform: scale( 1 );
opacity:1;
}
100% {
transform: scale( 0.5 );
opacity:0;
}
}

.mv {

position: relative;

}

.slick-active .ph {

animation: zoom1 2s ease 0s 1 normal both;

}

.slick-active .deco1 {

background-color: #ccc;

border-radius: 300px;

width: 100px;

height: 100px;

position: absolute;

top: 100px;

left: 100px;

animation: zoom2 1s ease 1s 1 normal both;

}

.slick-active .deco2 {

background-color: #ddd;

border-radius: 300px;

width: 100px;

height: 100px;

animation: zoom3 1s ease 0.5s 1 normal both;

position: absolute;

top: 300px;

left: 400px;

}

.slick-active .deco3 {

background-color: #ddd;

border-radius: 300px;

width: 100px;

height: 100px;

animation: zoom3 1s ease 0s 1 normal both;

position: absolute;

top: 100px;

left: 600px;

}

@keyframes zoom1 {

0% {

transform: scale( 1.2 );

opacity:0;

}

100% {

transform: scale( 1 );

opacity:1;

}

@keyframes zoom2 {

0% {

transform: scale( 3 );

opacity:0;

}

70% {

transform: scale( 2 );

opacity:1;

}

100% {

transform: scale( 1 );

opacity:0;

}

@keyframes zoom3 {

0% {

transform: scale( 2 );

opacity:0;

}

70% {

transform: scale( 1 );

opacity:1;

}

100% {

transform: scale( 0.5 );

opacity:0;

}

たとえば、

.slick-active .ph {
animation: zoom1 2s ease 0s 1 normal both;
}

animationアニメーション仕組み

これは、詳しくはこのanimationのまとめを見たらわかるのですが、
animation: nameの値　durationの値　timingの値　delayの値　iterationの値　directionの値　fillの値　playの値　;

と言うルールで当てています。

これで言うと、スタイルシートで指定してるzoom1のアニメーションをduration２秒、つまりアニメの長さ２秒かけてしてください、easeの動きで、delayつまり待機時間は０秒（＝すぐスタートさせる）・・・と言うような指示です。

.slick-activeというのは、そのスライドがアクティブになった時につくクラスです、アクディブになったら開始させるために.phの前に.slick-activeをつけています。

他の要素も同じ理屈でアニメーションしています。

時間差をつけてるのは、animation:;で指示する時に、delayとdurationで調整しています。

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/slick-theme.css">
<script src="js/slick.min.js"></script> 
<script>
$(function() {
    $('.slider').slick({   
      slidesToShow: 1,       
		accessibility: false,
        fade: true,
        autoplay: true,
        infinite: true,
        dots: false,
        arrows: false,
        autoplaySpeed: 2000,
        speed: 3000,
		 pauseOnHover: false
      
     });
});
</script>