• 作成日:

背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法

背景画像をズームアップしながらフェードで切り替えるスライダー

今回は背景画像をズームアップさせながらフェードで切り替えるスライダーを、Swiperを使って実装します。Swiperなどのプラグインを使わなくても実現できますが、ページネションの設定や1ページに複数スライダーを配置することを考えるとプラグインを使ったほうが手軽です。

設定条件は以下。

  • jQueryは使わない(使わなくでも動きます)
  • Swiperのバージョンは4.50以上を使用する

デモページを作成したのでまずは確認してみてください。

背景画像をズームアップしながらフェードで切り替えるスライダーを実装する

まずはSwiperをインストールしましょう。

Swiperのファイルを読み込む

CDNを使って読み込むのであれば以下の2行をheadの中に読み込めば準備完了です。Swiperの最新バージョンは5.20ですがCDNでは4.51までしか用意されていないのでそちらを読み込みます。

CDNの他のバージョンを読み込みたい方は以下のリンクから選んでください。
CDNのSwiperのバージョンを選ぶ

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

 

 

CDNからではなく、直接ファイルを配置したい方は、以下のURLからSwiperのzipファイルをダウンロードしましょう。今回はバージョン5.20を選ぶことにします。(ver4.50以上ならどれでも大丈夫です。)

Swiperのバージョンをダウンロード

 

zipファイルを解凍したら、cssフォルダとjsフォルダからswiper.min.cssとswiper.min.jsをそれぞれ見つけてご自身の環境にドラック&ドロップしましょう。

  • swiper.min.css
  • swiper.min.js

 

インポートしたファイルはheadに読み込みます。

<link rel="stylesheet" href="./path/to/swiper.min.css" />
<script src="./path/to/swiper.min.js"></script>

 

HTMLに書くこと

Swiperを使用するときのHTMLは以下のようになります。必ず必要なclass名は以下の3つです。ページネーションや左右のページ送りの部分は必要ない場合は消してもかまいません。今回は表示させる前提で説明していきます。

  • swiper-container
  • swiper-wrapper
  • swiper-slide
 <div class="swiper-container">
          <div class="swiper-wrapper">
            <!-- 背景画像1 -->
            <div class="swiper-slide">
              <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
            </div>
            <!-- 背景画像2 -->
            <div class="swiper-slide">
               <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
            </div>
            <!-- 背景画像3 -->
            <div class="swiper-slide">
               <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
            </div>
          </div>
          <!-- 丸いページネーション -->
          <div class="swiper-pagination"></div>

          <!-- 左右のページ送り -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
</div>

 

CSSに書くこと

12秒かけてズームさせて、600pxの高さに背景画像を表示させる設定です。

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { //1.15倍させる指定
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { //12秒かけて拡大させる
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; //背景画像は中央を軸に表示させる
    height: 600px; //600pxの高さで表示させる
}

 

jsに書くこと

init.jsなどのファイルを作成して以下を内容をコピペします。

let mySwiper = new Swiper(".swiper-container", {
  // Optional parameters
  loop: true, // ループの指定
  effect: "fade", //フェードの指定
  autoplay: {
      delay: 4000, //4秒後に次のスライドへ
      disableOnInteraction: false //ユーザー側で操作してもスライドを止めない
  },
  speed: 2000, //2秒かけてフェードで切り替わる
  pagination: { // 丸のページネーションを使うなら書く
      el: ".swiper-pagination"
  },
  navigation: { // 左右のページ送を使うなら書く
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
  }
});

 

1ページにスライダーを複数使いたい場合は?

1ページに違うエフェクトのスライダーを複数使う場合はjsに以下のように書きます。パラメーターの書き方は一緒です。

let mySwiper01 = new Swiper(".swiper01", {
  // パラメーターの指定の仕方は一緒なので省略
 
});

let mySwiper02 = new Swiper(".swiper02", {
  // パラメーターの指定の仕方は一緒なので省略
  
});

 

 

HTMLに書くところも少しだけ変わります。swiper-containerのクラス名のところにjsに書いたswiper01、swiper02をそれぞれ追加します。

<div class="swiper-container swiper01">
   //この中に書く内容は一緒なので省略
     
</div>

<div class="swiper-container swiper02">
   //この中に書く内容は一緒なので省略
     
</div>

 

この設定で1ページにそれぞれ違うエフェクトのスライダーを実装できます。

背景画像の中にテキストを入れたい場合は?

背景画像の上にテキストを乗せることもできます。swiper-slideの中を以下のようにします。

<div class="swiper-slide">
          <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');" ></div>
          <div class="slide-text">
               <p>ここにテキスト</p>
          </div>
</div>

 

 

テキストを中央表示する場合はcssを以下のようにします。フォントサイズや色は好きなものに変更しましょう。

.slide-text {
      position: absolute;
      z-index: 10;
      font-size: 4rem;
      color: #fff;
      width: 100%;
      top: 45%;
      text-align: center;
      font-weight: bold;
}

 

さいごに…

今回は背景画像をSwiperを使ってズームアップしながらフェードさせるスライダーを紹介しました。背景画像だけではなく通常の画像としても同じようにズームさせることが可能です。

実装するのは以下の記事を参考にしてみてください。
Swiper+CSSのみ!ズームアップしながらフェードインで切り替わるスライダーの実装方法 | WEMO.tech

 

Swiperを使って違うエフェクトを試したい方は以下のリンクからパラメーターが見れます。
Swiperのパラメーター