<p>Swiper の背景画像を時間経過と共にズームダウンさせつつ、<br>フェード効果を用いてスライドを切替させてみます。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fumij3&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fumij3&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fumij3%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hc499e4ad38">解説</h2><h3 id="h8d027c8ed3">はじめに</h3><p>ズームアウト（イン）+ フェード効果 は紹介されているブログをよく見かけますが、<br>いずれも <u>拡大された画像が一気に縮小されてから次のスライドが表示される問題 </u>が特定の条件下で発生していました。<br>このような動きは美しくないため、独自に調整を加えた上でご紹介致します。<br></p><h3 id="h9c82a4d4d5">追加されるクラスの役割</h3><p>アニメーションはCSSで実装するため、追加されるクラスについて把握しておく必要があります。</p><pre><code>&lt;!--  スライドの基本クラスです。 --&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;

&lt;!-- 前のスライドに追加されるクラスです。前のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-prev"&gt;&lt;/div&gt;

&lt;!-- 次のスライドに追加されるクラスです。次のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-next"&gt;&lt;/div&gt;

&lt;!-- 表示中のスライドに追加されるクラスです。 --&gt;
&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="hf2db5fb692">調整を加えた箇所</h3><p><br>細かな解説は他の方が既に行われているため、ここでは行いません。<br>以下のブログを参考にさせていただきました。<br><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a><br></p><h4 id="hc1b4dd851a">前のスライドに独自のクラスを追加</h4><p>表示中のスライドに追加されるクラス <code>.swiper-slide-active</code> に加えて、<br>前回表示したスライドに <code>.swiper-slide-active-prev</code> というクラスを追加し、<br>ズームアウトのスタイルを定義しています。<br></p><pre><code>.swiper-slide-active-prev .swiper-bg img,
.swiper-slide-active .swiper-bg img {
    animation: zoomDown 10s linear 0s 1 normal both;
}</code></pre><p><br></p><h4 id="h28c6b6942f">スライドを連続で切替できないように</h4><p>一度切り替えた場合は、<code>swiper.speed</code> の値分の時間が経過しないと<br>次の切り替えができないよう、独自のCSSを追加しています。<br><br>連続で切り替えた場合だと、<u>拡大された画像が一気に縮小されてから次のスライドが表示される問題</u> が発生します。</p><pre><code>.swiper-button-prev.swiper-button-disabled-user,
.swiper-button-next.swiper-button-disabled-user {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
.swiper-pagination-not-clickable {
    opacity: 0.5;
    pointer-events: none;
}</code></pre><p><br><code>slideChange</code>イベント実行時に以下のような処理が働くよう設定しています。</p><pre><code>on: {
  slideChange: () =&gt; {
    // 変数
    const self = swiper;
    const speed = self.params.speed;
    const navPrevButton = self.el.querySelector(".swiper-button-prev");
    const navNextButton = self.el.querySelector(".swiper-button-next");
    const navButtonDisabledUser = "swiper-button-disabled-user";

    // 処理
    _slidesChangeFirst();
    setTimeout(() =&gt; {
      for (let index = 0; index &lt; self.slides.length; index++) {
        self.slides[index].classList.remove("swiper-slide-active-prev");
      }
      _slidesChangeLast();
    }, speed);
    self.slides[self.previousIndex].classList.add("swiper-slide-active-prev");


    // スライド変更後に最初に行う処理
    function _slidesChangeFirst() {
      navPrevButton.classList.add(navButtonDisabledUser);
      navNextButton.classList.add(navButtonDisabledUser);
      self.pagination.el.classList.add("swiper-pagination-not-clickable");
    }
    // スライド変更後に最後に行う処理
    function _slidesChangeLast() {
      navPrevButton.classList.remove(navButtonDisabledUser);
      navNextButton.classList.remove(navButtonDisabledUser);
      self.pagination.el.classList.remove("swiper-pagination-not-clickable");
    }
  }
}</code></pre><p><br>解説は以上となります。</p>

<ul><li><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a></li></ul>

【サンプルあり】Swiperで背景画像をズームダウンしながらフェードで切り替えてみる

<p><u>Swiper</u> にアニメーションを絡める機会が増えてきましたので、<br>今回はスライド上に設置したテキストをアニメーションさせながら表示してみます。<br><br>この手の記事はデモがあったほうが絶対良いので、<br><u>CodeSandBox</u>を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fpvowl&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fpvowl&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fpvowl%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="ha31941844a">表示中のスライドには専用のクラスが追加される</h2><p>表示中のスライドには <code>.swiper-slide-active</code>というクラスが追加されます。</p><pre><code>&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;
...
&lt;div class="swiper-slide"&gt;&lt;/div&gt;</code></pre><p><br>これを利用してアニメーションを実装します。</p><pre><code>.swiper-slide{　opacity: 0　}
.swiper-slide-active{　opacity: 1;　}</code></pre><p><br></p><h2 id="hf75a47eea3">Transitionでも実装は可能</h2><p>今回は <code>animation</code> を使用していますが、<code>transition</code> でも実装は可能です。<br><br><code>.swiper-slide </code>に <code>.swiper-slide-active</code> が追加されることで、<br>アニメーション開始・終了のスタイルが順番に適用され、<br>結果的にアニメーションが再生されたことになります。<br><br>ページの描画完了時に <code>.swiper-slide-active</code>&nbsp;が追加済だった場合、<br>アニメーション終了のスタイルだけが適用されるため、想定とは異なる動作になる恐れがあります。<br><u>CodeSandBox </u>だとこのような動きになってしまうので  <code>animation</code> で実装を行いました。</p><pre><code>.swiper-slide .swiper-catch {
&nbsp; &nbsp; opacity: 0;
&nbsp; &nbsp; transform: translateX(0);
&nbsp; &nbsp; transition: all 0.4s ease;
}
.swiper-slide-active .swiper-catch {
&nbsp; &nbsp; opacity: 1;
&nbsp; &nbsp; transform: translateX(50px);
&nbsp; &nbsp; transition: all 0.4s ease 0.6s;
}</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p><u>Swiper</u> には様々なAPIが用意されておりますが、<br>アニメーションを追加したい場合は、CSSを弄るだけで事足りる場合が多く感じます。<br>スライド上のテキスト以外にもいくつかのアニメーションを実装したので、後日改めて紹介したいと思います。</p>

<ul><li><a href="https://into-the-program.com/swiper-slide-text-fadein/" target="_blank" rel="noopener noreferrer">【Swiper】テキストがフェードインで表示されるスライダーの作り方</a></li></ul>

カテゴリーが「Swiper.js」の記事

カテゴリ