既存のSwiperスライドにCSSを追加するだけで拡大アニメーションを実装する方法を紹介します。なお、追加するCSSは完全にコピペのみでアニメーションが実装できます。
目次
見本（CodePen）
最初に完成品のCodePenを載せておきます。スライドが拡大するアニメーション動作やコードをご確認下さい。
See the Pen Swiper ｜ 拡大アニメーション by s sim (@s-sim) on CodePen.
注意：Swiperバージョンについて
SwiperのCDNに記載されるSwiperバージョンですが、バージョン９に固定しました。この記事も最初はCDNのバージョンを明記せずに常に最新バージョンが適用されるようにしていましたが、2023/9/23時点でオートプレイが２枚目で止まってしまうバグを確認したため、正常に動作するバージョン９に変更いたしました。
具体的にどの部分が変わっているかというと、上記CDN中の「swiper@9」が修正以前は「swper」でした。
拡大アニメーション用の追加CSS
上のCodePenで紹介したスライドの拡大アニメーションですが、実は数行のCSSをコピペで追加するだけで実装が可能です。
下記CSSをコピペするだけでOKですので、是非お試し下さい。
注意：「.slide-img」などのスライド画像のクラス属性は適宜変更して下さい。当然ですが、HTMLのクラス属性とCSSのクラス属性は一致していないとアニメーションは動作しません。
// スライド画像の拡大アニメーションの設定
@keyframes zoom {
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: zoom 7s linear 0s normal both;
}コード解説
少し捕捉すると、拡大率は下記２箇所の数字で変更できます。
- 4行目のscale(1)：カッコ内の数字は拡大スタート時点の画像の拡大率です。
- 7行目のscale(1.1)：カッコ内の数字は拡大アニメーション終了時点の画像の拡大率です。
アニメーションの時間と特徴は13行目の数字で変更可能です。
関連記事
Swiper頻出パターンとカスタマイズ方法
あわせて読みたい
【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】
Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade, 矢印ボタンやページネーションの色・サイズ・形状変更と外に出すなどの表示位置の変更、ページ内に複数のSwiperを設置する場合のコードの書き方を初心者向けに解説します。
Swiperに文字アニメーションを追加する方法
あわせて読みたい
【Swiper】画像に文字アニメーションを入れる方法【CSSのみ】
この記事ではSwiperのスライド画像への文字入れと文字アニメーションの付け方を紹介します。 画像に文字を入れる 下のCodePenは、Swiperのスライド画像に文字をいれた事...
Swiperのスライドの上のレイヤーにボタンをオーバーレイ表示する方法
SIMS-CODE
Swiperのスライドの上のレイヤーにボタンをオーバーレイする方法 | SIMS-CODE
この記事では、Swiperで作ったスライド（カルーセル）の一つ上のレイヤーに、ボタンを設置する方法を紹介します。なお、ボタンは画面上の一定の位置に表示され、スライド切…
