スライドショー:時間差で要素を出す方法(slick使用)
最終更新日:2021.10.01 [金] 公開日:2020.04.06 [月] カテゴリー:html・CSS・JS備忘, 便利なプラグイン・ジェネレーター
これは説明するよりもDEMOを見ていただいた方がわかりやすいと思うので早速DEMOです。
DEMO : https://chakoiro.net/demo/slick/slide_test.html
こちら説明するまでもないのですが、メイン画像(色ついてる背景みたいなの)が切り替わりつつ、丸い輪っかが時間差で縮んでいくのがわかるでしょうか?
このデモでは輪っかにしましたが、キャッチコピーでも別の画像でも何でも応用できると思います。
仕組みは至って簡単で・・・と言うか、力技。
html
これは特に説明するまでもなく、sliderという大きな枠で括って、スライドの要素を並べているだけですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<section class="slider"> <div class="mv"><!--スライド1枚目:ピンク--> <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> |
css
これも説明するほどではなくて・・・各要素にkeyframeでアニメーションを当てているだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.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: nameの値 durationの値 timingの値 delayの値 iterationの値 directionの値 fillの値 playの値 ;
と言うルールで当てています。
これで言うと、スタイルシートで指定してるzoom1のアニメーションをduration2秒、つまりアニメの長さ2秒かけてしてください、easeの動きで、delayつまり待機時間は0秒(=すぐスタートさせる)・・・と言うような指示です。
.slick-activeというのは、そのスライドがアクティブになった時につくクラスです、アクディブになったら開始させるために.phの前に.slick-activeをつけています。
他の要素も同じ理屈でアニメーションしています。
時間差をつけてるのは、animation:;で指示する時に、delayとdurationで調整しています。
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
唯一気をつけるのは、先程のスタイルシートの長さとslickのautoplay長さ、slicの長さがanimationより短くなると、当然プツッと切れてしまうので・・・
説明が雑すぎてすみません・・・
そして力技ですみません。
コメントを残す