1. トップページ
  2. 【サンプルあり】Swiperでスライド上のテキストにアニメーションをつけてみる

【サンプルあり】Swiperでスライド上のテキストにアニメーションをつけてみる

Swiper にアニメーションを絡める機会が増えてきましたので、
今回はスライド上に設置したテキストをアニメーションさせながら表示してみます。

この手の記事はデモがあったほうが絶対良いので、
CodeSandBoxを使って実装を行いました。
この記事では全体のソースコードは紹介せず、補足だけを行います。


表示中のスライドには専用のクラスが追加される

表示中のスライドには .swiper-slide-activeというクラスが追加されます。

<div class="swiper-slide swiper-slide-active"></div>
<div class="swiper-slide"></div>
...
<div class="swiper-slide"></div>


これを利用してアニメーションを実装します。

.swiper-slide{ opacity: 0 }
.swiper-slide-active{ opacity: 1; }


Transitionでも実装は可能

今回は animation を使用していますが、transition でも実装は可能です。

.swiper-slide .swiper-slide-active が追加されることで、
アニメーション開始・終了のスタイルが順番に適用され、
結果的にアニメーションが再生されたことになります。

ページの描画完了時に .swiper-slide-active が追加済だった場合、
アニメーション終了のスタイルだけが適用されるため、想定とは異なる動作になる恐れがあります。
CodeSandBox だとこのような動きになってしまうので animation で実装を行いました。

.swiper-slide .swiper-catch {
    opacity: 0;
    transform: translateX(0);
    transition: all 0.4s ease;
}
.swiper-slide-active .swiper-catch {
    opacity: 1;
    transform: translateX(50px);
    transition: all 0.4s ease 0.6s;
}


まとめ

Swiper には様々なAPIが用意されておりますが、
アニメーションを追加したい場合は、CSSを弄るだけで事足りる場合が多く感じます。
スライド上のテキスト以外にもいくつかのアニメーションを実装したので、後日改めて紹介したいと思います。

参考にさせていただいたページ