slick フェードスライド 実装サンプル
メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）アニメーションしてフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。
特徴
- レスポンシブ
- フェード遷移
目次
前提
デモでは下記のCSSとJavascriptファイルを読み込んでいます。
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- Javasript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
使用HTML
<ul class="slide">
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=1" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=2" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=3" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=4" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=5" />
</li>
</ul>
1. フェードスライド
フェードイン、フェードアウトして切り替わるスライドです。
See the Pen
slick – fade by Aquarium (@aquarium)
on CodePen.
Javascript
var $slide = $(".slide")
.slick({
fade: true, // fedeオン
speed: 1500, // 画像切り替えにかかる時間（ミリ秒）
autoplaySpeed: 3000, // 自動スライド切り替え速度
arrows: false, // 矢印表示・非表示
autoplay: true, // 自動再生
slidesToShow: 1, // スライド表示数
slidesToScroll: 1, // スライドする数
infinite: true // 無限リピート オン・オフ
});
- マウスドラッグの切り替え可
- 画像が切り替わっている間はマウスドラッグでの切り替えはできません。
- 画像の切り替え速度を変更するには
speedの値を調整します。値を大きくするほどゆっくり切り替わります。
2. ズームフェードスライド
ゆっくりと拡大アニメーションしながらフェードイン、フェードアウトで画像が切り替わるスライドです。
See the Pen
jQuery Slick Slider – Fade & Zoom by kura (@kuranopen)
on CodePen.
CSS
.slide-animation{
animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}CSSは、ズーム用のアニメーション@keyframes fadezoomとそのアニメーションを適用するクラス.slide-animationを用意します。
Javascript
var $slide = $(".slide")
.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
speed: 2000,
autoplaySpeed: 4000,
autoplay: true
})
.on({
beforeChange: function(event, slick, currentSlide, nextSlide) {
$(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
$(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
},
afterChange: function() {
$(".preve-slide", this).removeClass("preve-slide slide-animation");
}
});
$slide.find(".slick-slide").eq(0).addClass("slide-animation");Javascriptは、スライド切り替え動作前に実行するイベントと動作後に実行するイベントそれぞれにアニメーション関連の処理を加えます。
仕組みは、画像が切り替わる動作が始まった直後に次の画像のアニメーションを開始。
そして、切り替わる前の画像に後でアニメーションを停止するためのクラスを付与します。
次の画像に切り替わったら、前の画像のアニメーションを停止して、アニメーションを停止するためのクラスを削除します。
ただこれだけだと、ページを開いたときに1枚目の画像にアニメーションがないため、最後のコードでアニメーションを開始します。
