【Swiper】ズームインした後にフェードで切り替わるスライダーの作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperでズームインした後にフェードで切り替わるスライダーの作り方をご紹介しています。

Swiperは、jQueryを必要としないJavaScriptのスライダーライブラリです。高機能でありながらシンプルな設計となっているため、初めて触る方にもとっつきやすいスライダーとなっています。

今回は、Swiperで実装することができるフェードエフェクトのスライダーに少し手を加えて、画像がズームした後にフェードで次のスライドに切り替わるスライダーを作っていきたいと思います。

本記事ではズームインの後にフェードするスライダーの実装方法を、下記の2パターンご紹介しています。

CSSのみでズームインした後にフェードで切り替わるスライダーを実装する
CSS + JSでズームインした後にフェードで切り替わるスライダーを実装する

キービジュアルはもちろん、商品紹介やギャラリーのように使用することができるのでおすすめです！

では、解説していきます。

HTMLでスライダーを作成する

今回ズームインの後にフェードするスライダーの実装方法を2パターンご紹介していますが、どちらも同じHTMLを使用します。下記のスライダーになります。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="//into-the-program.com/uploads/custom-post-type-hide-permalink.jpg" alt=""></div>
        <div class="swiper-slide"><img src="//into-the-program.com/uploads/custom-post-type-hide-permalink.jpg" alt=""></div>
        <div class="swiper-slide"><img src="//into-the-program.com/uploads/custom-post-type-hide-permalink.jpg" alt=""></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

「前へ・次へ」のナビゲーションがついているだけの簡単なものになりますが、動きを確認するようにご利用いただけれればと思います。

では、まずはCSSのみで実装する方法から見ていきましょう！

CSSのみでズームインした後にフェードで切り替わるスライダーを実装する

下記は完成した際のデモになります。スライドに表示されている画像がゆっくりとズームインしていき、止まった後にフェードで次のスライドに切り替わります。

DEMO

See the Pen
FadeIn ZoomIn Slider1｜Swiper by ryohei (@intotheprogram)
on CodePen.

CSSは下記のような記述になっています。「@keyframes」を作成しておき「アクティブスライド」と「1つ前にアクティブだったスライド」に「animation」を指定します。

SCSS

@keyframes zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
    }
}


.swiper-container {
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 40px auto;

    .swiper-wrapper {

        .swiper-slide {
            overflow: hidden;

            img {
                width: 100%;
                height: auto;
            }
        }
        
        //Prevスライド
        .swiper-slide-prev,
        //Activeスライド
        .swiper-slide-active,
        //ループ時に複製される正面のスライド
        .swiper-slide-duplicate-active {

            img {
                animation-name: zoom;
                animation-duration: 4s;
                animation-fill-mode: forwards;
            }
        }
    }
}

後はSwiperで通常通り「fade」のエフェクトを指定したスライダーを指定します。

JS

var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: {
        delay: 4000,
    },
    speed: 2000,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

上記の「CSS」と「JS」を追記すると、デモのようなスライダーを実装することができます。

Swiperでは、現在表示されているアクティブのスライドには「.swiper-slide-active」というクラスが、1つ前にアクティブだったスライドには「.swiper-slide-prev」というクラスが付与されます。（ループを有効にしている場合は「.swiper-slide-duplicate-active」も。）この3つのクラスを利用することで、ズームインだけではなく、他のアニメーションも簡単に追加することができます。

色々なアニメーションを追加して、Swiperの可能性を感じていただければ幸いです。

CSS + JSでズームインした後にフェードで切り替わるスライダーを実装する

前項では「CSS」のみを使用してズームインするアニメーションを実装してみましたが、本項ではスライドの切り替えをスクリプトで取得して予め用意しておいたクラスを付与してズームインを再現してみたいと思います。

下記が本項でご紹介するスライダーのデモになります。

DEMO

See the Pen
FadeIn ZoomIn Slider2｜Swiper by ryohei (@intotheprogram)
on CodePen.

前項と同じく、ズームインは「@keyframes」で実現します。アクティブスライドに付与するクラスは「.is-play」として用意しておきます。

SCSS

@keyframes zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
    }
}

.swiper-container {
    width: 100%;
    max-width: 500px;
    height: 300px;
    margin: 40px auto;

    .swiper-wrapper {

        .swiper-slide {
            overflow: hidden;

            img {
                width: 100%;
                height: auto;

                &.is-play {
                    animation-name: zoom;
                    animation-duration: 4s;
                    animation-fill-mode: forwards;
                }
            }
        }
    }
}

最後にスクリプトでクラスの付け外しを実装します。（詳しくはコメントを記載しています。）

JS

var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    autoplay: {
        delay: 4000,
    },
    speed: 2000,
    effect: 'fade',
    fadeEffect: {
        crossFade: true
    },

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    on: {
        //スライド切り替え開始時に実行
        transitionStart: function(){

            //以前アクティブだったスライドのインデックス番号を取得する
            var previousIndex = this.previousIndex;
            //取得したインデックス番号を持つスライド要素を取得する
            var previousSlide = document.getElementsByClassName('swiper-slide')[previousIndex];
            //n秒後に「is-play」のクラス属性を削除する
            setTimeout(function() {
                previousSlide.firstElementChild.classList.remove('is-play');
            }, 2000);
        },

        //スライド切り替え完了後に実行
        transitionEnd: function(){
            //現在アクティブ状態にあるスライドのインデックス番号を取得する
            var activeIndex = this.activeIndex;
            //取得したインデックス番号を持つスライド要素を取得する
            var activeSlide = document.getElementsByClassName('swiper-slide')[activeIndex];
            //スライド要素に「is-play」のクラス属性を追加する
            activeSlide.firstElementChild.classList.add('is-play');
        },
    }
});

ばばっと書いてみましたがいかがでしょうか。

動きはほとんどおなじものですが、主な違いとしては、予めSwiperで用意されているクラス（「.swiper-slide-active」や「.swiper-slide-prev」）を利用するか、予めアニメーションを設定したクラスを追加するだけかの違いになります。

最後に

いかがでしたでしょうか。

Swiperは実務でもプライベートでも大変お世話になっているスライダーライブラリです。スライダーを使用する案件があれば真っ先に検討するほどに愛用しています。カスタマイズも容易で頭の中にあることを実現できる柔軟性がありますので、皆さんもSwiperを使用して新しいスライダーを生み出してみてはいかがでしょうか！

以上、Swiperでズームインした後にフェードで切り替わるスライダーの作り方のご紹介でした！