【サンプルあり】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を弄るだけで事足りる場合が多く感じます。
スライド上のテキスト以外にもいくつかのアニメーションを実装したので、後日改めて紹介したいと思います。