スライドショー:時間差で要素を出す方法(slick使用)

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

Pocket
Facebook にシェア
LINEで送る

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

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

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

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

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



html

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

css

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

たとえば、

.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

唯一気をつけるのは、先程のスタイルシートの長さとslickのautoplay長さ、slicの長さがanimationより短くなると、当然プツッと切れてしまうので・・・

説明が雑すぎてすみません・・・

そして力技ですみません。


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA