【Swiper】テキストがフェードインで表示されるスライダーの作り方

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

本記事では、Swiperでスライドを切り替えた際にテキストがフェードインで表示されるスライダーの作り方をご紹介しています。

スライドが切り替わった後にテキストがふわっと表示されため、キービジュアルや大きめのスライダーに使用することで目を引くこと間違いないなしです！

下記は本記事でご紹介する内容を実装した際の完成イメージです。

See the Pen
Slider Text Fade In | Swiper by ryohei (@intotheprogram)
on CodePen.

今回はスライド切り替え時にテキストをフェードインで表示するアニメーションのご紹介となりますが、テキストだけに限定されるものではなく、画像や図などでも使用することができます。CSSだけで作成していますので、スクリプトを作成することなく多様なアニメーションを実現できるのでおすすめの方法になります。

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

Swiper本体を読み込む

まずは「Swiper」本体を読み込むところから。

「Swiper」はJavaScriptのスクリプトになります。そのため「Swiper」を使用する場合は別途本体のライブラリファイルを読み込む必要があります。ダウンロードする方法とCDNを利用する方法がありますが、ダウンロードされる方は公式サイトへ、CDNで利用される場合は下記をスライダーを実装するファイルに読み込みましょう。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

以上で「Swiper」本体の読み込みは完了です。続いてHTMLでスライダーの表示部分を作成していきます。

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

ではスライダーを作成していきましょう！

下記はデモで使用しているスライダーの表示部分をマークアップしたものです。基本的に公式サイトで紹介されている内容と同じものになります。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/id/325/700/400/);"><p>Lorem ipsum<br>dolor sit amet</p></div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/id/548/700/400/);"><p>Lorem ipsum<br>dolor sit amet</p></div>
        <div class="swiper-slide" style="background-image: url(https://picsum.photos/id/550/700/400/);"><p>Lorem ipsum<br>dolor sit amet</p></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

※「img」タグに指定している画像は「Lorem Picsum」というサービスのものです。指定した画像はもちろん、ランダムな画像も取得できるため、デモを作成する際におすすめです！

続いて作成したスライダーにCSSでスタイルを定義してきます。

スライダーにスタイルを定義する

スタイルは下記を参考に作成していきます。

フェードインアニメーションは「@keyframes」で作成する
アクティブなスライドでのみ「animation」を実行する

2番目の項目はスクリプトが必要になると思われた方もいらっしゃると思いますが、「Swiper」ではアクティブなスライドに下記の「class」が付与されます。

.swiper-slide-active

この仕組みを利用して、アクティブなスライドでのみ「animation」を実行するようにスタイルを定義していきます。

SCSS

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.swiper-container {
    width: 100%;
    height: 100vh;

    .swiper-wrapper {
      
       //通常時のスライド
        .swiper-slide {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            
            p {
                position: absolute;
                top: 40%;
                left: 10%;
                color: #ffffff;
                font-size: 3.5vw;
                font-weight: bold;
            }
        }

       //アクティブ時のスライド
        .swiper-slide-active {
           
            p {
                animation-name: fade-in;
                animation-duration: 2s;
                animation-delay: 2s;
                animation-fill-mode: both;
            }
        }
    }
}

コメントに記載している「通常時のスライド」のクラスに見た目のスタイルを定義し、「アクティブ時のスライド」の方に実行するアニメーションを指定します。これだけであ「アクティブ時のスライド」に自在にスタイルをつけることができます。

では、最後にスクリプトを指定でスライダーが動くようにしていきましょう。

スクリプトでスライダーを動かす

スクリプトは基本的に公式サイトに記載があるものと同じですが、今回はオートプレイに対応したループするスライダーを作りたいので、少しだけオプションを追加します。

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

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

以上で冒頭でご紹介したデモの内容の完成です！