MENU
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WEB制作者向け無料テーマ「Arkhe」をリリースしました

Swiper+CSSのみ！ズームアップしながらフェードインで切り替わるスライダーの実装方法

JavaScript

jQuery不要の高機能スライダープラグインとして有名な「Swiper」、便利ですよね。

実はこのSwiper、表示中のスライドとその前後のスライドに特有のクラスが付いていまして、それを活用してちょろっとCSSを加えるだけで、ズームインしながらフェードで切り替わる効果をつけることができたりもします。

今回は、その方法をご紹介していこうと思います。

以前別の記事で、外部プラグインもjQueryも使わずに同様のズームアップ&フェードのスライドを自作する方法を紹介したのですが、それよりもかなり簡単に実装できるんじゃないかなと思います。

Swiperの機能をベースにしているので、でページャーとかもそのまま簡単に使えますし、CSSアニメーションの内容を変えるだけでいろんなパターンの効果を実現できるのではないかなと。

目次

ズームアップ＆フェードで切り替わるスライダーのデモ

まずはデモを先にお見せいたします。

See the Pen Swiperでズームインしながらフェードで切り替わるスライダー by ddryo (@ddryo-the-encoder) on CodePen.

こんな感じで、ズームアップしながらフェードで切り替わっていくスライダーを実装できます。

ズームの倍率・切り替えの早さなどはデモ用にわかりやすくしていますが、本来はもっとゆったり見せた方が美しいでしょう。

手順１：まずは普通にSwiperでスライダーを実装する

Swiperの使い方についてまだ知らない人は公式サイトを見るなりググるなどしてください。
一応、ざっと説明しておきます。

Swiperを読み込む

cdnjs.comにあるSwiperファイルをCDNで読み込むことができますので、今回はそちらの手法でご紹介しておきます。

スライダーを表示させたいページの<head>内で、以下のコードを追記し、必要ファイルを読み込みましょう。

Swiprファイルの読み込み

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

必要なのはswiper.min.cssとswiper.min.jsの２つです。

HTMLで画像スライダーを組み立てる

今回は簡略化のため、画像タグのみを設置したスライダーにしています。

スライダーを設置したい場所にHTMLを記述

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-img">
        <img src="https://picsum.photos/id/1041/1200/640" alt="スライダー画像1">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img">
        <img src="https://picsum.photos/id/1016/1200/640" alt="スライダー画像2">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="slide-img">
        <img src="https://picsum.photos/id/1056/1200/640" alt="スライダー画像3">
      </div>
    </div>
  </div>
</div>

スライダーの枚数はこの例では３枚ですが、好きに設置してください。

.swiper-container、.swiper-wrapper、.swiper-slideの3つのdivタグはSwiperに必要な要素です。

その中に、.slide-imgというクラス名付きのdivタグで囲んだ画像を設置しています。

JSでSwiperを起動させる

HTML側が準備できたら、JS側でSwiperを起動させてあげましょう。

Swiperを起動

let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
}
new Swiper('.swiper-container', swipeOption);

切り替えタイミングとスピードはデモ版と同じ数値で紹介しておきます。
好きな時間に変えてご利用ください。

effectの指定は'fade'になるようにだけ、注意しましょう。

手順２：CSSでズームアップのアニメーションを追加する

Swiperが設置できればあとはもう簡単です。

以下のCSSを任意の場所で追記する

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

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

//imgタグだと下に隙間ができるのでblockに。
.slide-img img{
  display: block;
}

@keyframesでズームアップするアニメーションを定義しておき、そのアニメーションをスライダーの画像部分に適用させているだけです。

ポイントは、以下の３つのセレクタを利用していること。

  • .swiper-slide-active
  • .swiper-slide-duplicate-active
  • .swiper-slide-prev

Swiperには、現在表示中のスライドに.swiper-slide-activeを、その前のスライドには.swiper-slide-prev、その次のスライドには.swiper-slide-next、といったクラスが付与されています。

.swiper-slide-duplicate-activeというのは、ループで最後と最初のスライドに切り替わる時についてくるクラスっぽいです。

これらを利用してアニメーションをつけています。

  • 表示中のactiveなスライドにアニメーションをつける
  • すでに次の画像に切り替わってprevになっているスライドでもフェード中はまだ見えているので、アニメーションを維持する

という内容になっています。

アニメーションの秒数について

上記のCSSの例では、ズームアップアニメーションの秒数は10秒となっています。
（zoomUp 10sの部分）

この10秒というのは割と適当なんですが、Swiperでのスライダーの切り替えまでの時間と、フェードの時間を合わせた秒数よりも長くなるようにだけ注意してください。

今回の例だと、4000 + 2000 (ms)、つまり６秒以上であれば問題ないかなと思います。
私はそれよりもいつも多めの時間を設定しています。念の為。

ズームアップ以外の表現も簡単にできる

アニメーションのzoomUpの部分を、例えばズームアップじゃなくて（translateを使って）横に移動させると、また違った表現になったりしています。

デモを作るのが面倒だったので、実際に使っているサイトを紹介しておきます。

横にスライドさせた版：WordPressテーマ「SWELL」公式サイト

このWordPressテーマ「SWELL」でも、ズームアップか横にスライドかを選べるようにしています。

JavaScript

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次