SIMSwiperでスライド画像が拡大するアニメーションの作り方を紹介します。
実装方法自体は、CSSを数行追記するだけの簡単操作で非常にお手軽です。
目次
完成スライドとポイント
拡大アニメーション付きのSwiperスライドの動作とコード
下に拡大アニメーション付きのSwiperスライドのCodePenを置いておきます。アニメーション動作とコードをご確認下さい。
See the Pen Swiper | Enlarge Image by s sim (@s-sim) on CodePen.
コーディングのポイント
このアニメーションを実装するための設定はCSSを追記するのみで、HTMLとJavaScriptは通常のSwiperスライドのものと同じです。
CSS
拡大アニメーションで追記するCSS
拡大アニメーション機能を実装するのに必要な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;
}上のCSSでセレクター「.slide-img」は、スライド画像用imgタグのクラス属性です。このクラス名は各自違うと思いますので、必要に応じて入れ替えてください。
他はすべて共通になりますので変える必要はなく、コピペで実装できます。
CSS全文
念のため、CSS全文も掲載しておきますが、通常のSwiperスライドと同一です。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
/* スライド */
.lp-slide {
margin: 0 auto;
max-width: 1280px;
width: 100%;
}
.slide-img {
width: 100%;
object-fit: contain;
}
/* ここからスライド画像の拡大アニメーション */
@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;
}ここでは説明を省きますが、詳しくは下記の記事を参照下さい。
あわせて読みたい
【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】
Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade, 矢印ボタンやページネーションの色・サイズ・形状変更と外に出すなどの表示位置の変更、ページ内に複数のSwiperを設置する場合のコードの書き方を初心者向けに解説します。
HTML
HTML全文も掲載しておきますが、通常のSwiperスライドと同一です。
<body>
<!-- スライド -->
<div class="lp-slide">
<div class="lp-slide_wrapper">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- スライド１の画像 -->
<div class="slide-img_wrapper"><img class="slide-img" src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic1.jpg"
alt="スライド１">
</div>
</div>
<div class="swiper-slide">
<!-- スライド２の画像 -->
<div class="slide-img_wrapper"><img class="slide-img" src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic2.jpg" alt="スライド２">
</div>
</div>
<div class="swiper-slide">
<!-- スライド３の画像 -->
<div class="slide-img_wrapper"><img class="slide-img" src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic3.jpg" alt="スライド３">
</div>
</div>
<div class="swiper-slide">
<!-- スライド４の画像 -->
<div class="slide-img_wrapper"><img class="slide-img" src="https://shimizu-create.com/wp-content/uploads/2023/10/slide_pic4.jpg" alt="スライド４">
</div>
</div>
</div>
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</body>CSSと同様の説明は省略しますが、詳しくは下記の記事を参照願います。
あわせて読みたい
【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】
Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade, 矢印ボタンやページネーションの色・サイズ・形状変更と外に出すなどの表示位置の変更、ページ内に複数のSwiperを設置する場合のコードの書き方を初心者向けに解説します。
JavaScript
JavaScript全文も掲載しておきますが、通常のSwiperスライドと同一です。
// トップページのスライド
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1, //一度に表示するスライド枚数
spaceBetween: 0, //スライド間の余白
loop: true, //ループさせるか？
speed: 1000, //スライド速度
effect: "fade", //スライドをフェードで切り替える
autoplay:{
delay: 3000, //スライド保持時間
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});HTMLと同様の説明は省略しますが、詳しくは下記の記事を参照願います。
あわせて読みたい
【Swiper】設定・使い方とオプション・カスタマイズの方法【JavaScript】
Swiperの実案件で頻出パターンを紹介します。基本設定・使い方とオプション・カスタマイズの方法についてCodePenを使いながら、html, CSS, JavaScriptの書き方を解説。fade, 矢印ボタンやページネーションの色・サイズ・形状変更と外に出すなどの表示位置の変更、ページ内に複数のSwiperを設置する場合のコードの書き方を初心者向けに解説します。
関連記事
Swiperのスライドの上のレイヤーにボタンをオーバーレイ表示する方法
SIMS-CODE
Swiperのスライドの上のレイヤーにボタンをオーバーレイする方法 | SIMS-CODE
この記事では、Swiperで作ったスライド（カルーセル）の一つ上のレイヤーに、ボタンを設置する方法を紹介します。なお、ボタンは画面上の一定の位置に表示され、スライド切…
さいごに
以上、Swiperでスライド画像を拡大させるアニメーションの実装方法を紹介しました。
SIM意外と簡単に実装できますので、ご興味のある方は是非チャレンジしてみて下さい。
